Skip to content

Commit

Permalink
update tailwind css v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charlie85270
Charlie85270 committed Nov 29, 2022
1 parent 89066a5 commit bf5c636
Show file tree
Hide file tree
Showing 162 changed files with 1,978 additions and 1,955 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
153 changes: 68 additions & 85 deletions README.md
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions components/kit/components/commerce/pricing/PricingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,22 @@ export const notIncluded = [

const PricingCard: FC = () => {
return (
<div className="shadow-lg rounded-2xl w-64 bg-white dark:bg-gray-800 p-4">
<p className="text-gray-800 dark:text-gray-50 text-xl font-medium mb-4">Entreprise</p>
<p className="text-gray-900 dark:text-white text-3xl font-bold">
$0 <span className="text-gray-300 text-sm">/ month </span>
<div className="w-64 p-4 bg-white shadow-lg rounded-2xl dark:bg-gray-800">
<p className="mb-4 text-xl font-medium text-gray-800 dark:text-gray-50">Entreprise</p>
<p className="text-3xl font-bold text-gray-900 dark:text-white">
$0 <span className="text-sm text-gray-300">/ month </span>
</p>
<p className="text-gray-600 dark:text-gray-100 text-xs mt-4">
<p className="mt-4 text-xs text-gray-600 dark:text-gray-100">
For most businesses that want to optimize web queries.
</p>

<ul className="text-sm text-gray-600 dark:text-gray-100 w-full mt-6 mb-6">
<ul className="w-full mt-6 mb-6 text-sm text-gray-600 dark:text-gray-100">
{prices.map((price) => {
return (
<li key={price.label} className={`mb-3 flex items-center ${price.include ? '' : 'opacity-50'}`}>
{price.include ? (
<svg
className="h-6 w-6 mr-2"
className="w-6 h-6 mr-2"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="6"
Expand All @@ -69,7 +69,7 @@ const PricingCard: FC = () => {
xmlns="http://www.w3.org/2000/svg"
width="6"
height="6"
className="h-6 w-6 mr-2"
className="w-6 h-6 mr-2"
fill="red"
viewBox="0 0 1792 1792"
>
Expand Down
20 changes: 10 additions & 10 deletions components/kit/components/commerce/pricing/PricingCard2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@ import { prices } from './PricingCard';

const PricingCard2: FC = () => {
return (
<div className="shadow-lg rounded-2xl w-64 bg-indigo-500 dark:bg-gray-800 p-4">
<div className="flex text-white items-center justify-between">
<p className="text-4xl font-medium mb-4">Pro</p>
<p className="text-3xl font-bold flex flex-col">
<div className="w-64 p-4 bg-indigo-500 shadow-lg rounded-2xl dark:bg-gray-800">
<div className="flex items-center justify-between text-white">
<p className="mb-4 text-4xl font-medium">Pro</p>
<p className="flex flex-col text-3xl font-bold">
$99
<span className="font-thin text-right text-sm">month</span>
<span className="text-sm font-thin text-right">month</span>
</p>
</div>

<p className="text-white text-md mt-4">Plan include :</p>
<p className="mt-4 text-white text-md">Plan include :</p>

<ul className="text-sm text-white w-full mt-6 mb-6">
<ul className="w-full mt-6 mb-6 text-sm text-white">
{prices.map((price) => {
return (
<li key={price.label} className={`mb-3 flex items-center ${price.include ? '' : 'opacity-50'}`}>
{price.include ? (
<svg
className="h-6 w-6 mr-2"
className="w-6 h-6 mr-2"
xmlns="http://www.w3.org/2000/svg"
width="6"
height="6"
Expand All @@ -35,7 +35,7 @@ const PricingCard2: FC = () => {
xmlns="http://www.w3.org/2000/svg"
width="6"
height="6"
className="h-6 w-6 mr-2"
className="w-6 h-6 mr-2"
fill="white"
viewBox="0 0 1792 1792"
>
Expand All @@ -51,7 +51,7 @@ const PricingCard2: FC = () => {

<button
type="button"
className="w-full px-3 py-3 text-sm shadow rounded-lg text-indigo-500 bg-white hover:bg-gray-100 "
className="w-full px-3 py-3 text-sm text-indigo-500 bg-white rounded-lg shadow hover:bg-gray-100 "
>
Choose plan
</button>
Expand Down
24 changes: 12 additions & 12 deletions components/kit/components/commerce/pricing/PricingCard3.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@ const bonus = ['All free dashboard', 'Best ranking', 'Chocolate and meel'];

const PricingCard3: FC = () => {
return (
<div className="shadow-lg rounded-2xl w-64 bg-white dark:bg-gray-800 p-4">
<p className="text-black dark:text-white text-3xl font-bold">Essential</p>
<p className="text-gray-500 dark:text-gray-300 text-sm mb-4">For the basics tailwind</p>
<p className="text-black dark:text-white text-3xl font-bold">$99</p>
<p className="text-gray-500 dark:text-gray-300 text-sm mb-4">Per agent per month</p>
<div className="w-64 p-4 bg-white shadow-lg rounded-2xl dark:bg-gray-800">
<p className="text-3xl font-bold text-black dark:text-white">Essential</p>
<p className="mb-4 text-sm text-gray-500 dark:text-gray-300">For the basics tailwind</p>
<p className="text-3xl font-bold text-black dark:text-white">$99</p>
<p className="mb-4 text-sm text-gray-500 dark:text-gray-300">Per agent per month</p>

<button
type="button"
className="w-56 m-auto px-3 py-3 text-sm shadow border border-black rounded-lg text-black bg-white hover:bg-black hover:text-white dark:hover-text-gray-900 dark:hover:bg-gray-100 "
className="w-56 px-3 py-3 m-auto text-sm text-black bg-white border border-black rounded-lg shadow hover:bg-black hover:text-white dark:hover-text-gray-900 dark:hover:bg-gray-100 "
>
Request demo
</button>

<ul className="text-sm text-black dark:text-white w-full mt-6 mb-6">
<ul className="w-full mt-6 mb-6 text-sm text-black dark:text-white">
{includes.map((price) => {
return (
<li key={price} className="mb-3 flex items-center">
<li key={price} className="flex items-center mb-3">
<svg
className="mr-2"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -36,11 +36,11 @@ const PricingCard3: FC = () => {
);
})}
</ul>
<span className="w-56 block bg-gray-100 h-1 rounded-lg my-2" />
<ul className="text-sm text-black dark:text-white w-full mt-6 mb-6">
<span className="block w-56 h-1 my-2 bg-gray-100 rounded-lg" />
<ul className="w-full mt-6 mb-6 text-sm text-black dark:text-white">
{bonus.map((bon, index) => {
return (
<li key={index} className="mb-3 flex items-center space-x-2">
<li key={index} className="flex items-center mb-3 space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
Expand All @@ -53,7 +53,7 @@ const PricingCard3: FC = () => {
<div>
{bon}
{index === 0 && (
<a href="#" className="text-red-500 font-semibold">
<a href="#" className="font-semibold text-red-500">
free plan
</a>
)}
Expand Down
24 changes: 12 additions & 12 deletions components/kit/components/commerce/pricing/PricingCard4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,29 @@ import React, { FC } from 'react';

const PricingCard4: FC = () => {
return (
<div className="rounded-lg shadow-lg overflow-hidden mb-4">
<div className="mb-4 overflow-hidden rounded-lg shadow-lg">
<div className="px-6 py-8 bg-white dark:bg-gray-800 sm:p-10 sm:pb-6">
<div className="flex justify-center">
<span className="inline-flex px-4 py-1 dark:text-white rounded-full text-sm leading-5 font-semibold tracking-wide uppercase">
<span className="inline-flex px-4 py-1 text-sm font-semibold leading-5 tracking-wide uppercase rounded-full dark:text-white">
Team Plan
</span>
</div>
<div className="mt-4 flex justify-center text-6xl leading-none font-extrabold dark:text-white">
<span className="ml-1 mr-3 text-xl leading-8 font-medium text-gray-500 dark:text-gray-400">
<div className="flex justify-center mt-4 text-6xl font-extrabold leading-none dark:text-white">
<span className="ml-1 mr-3 text-xl font-medium leading-8 text-gray-500 dark:text-gray-400">
from
</span>
$10
<span className="ml-1 pt-8 text-2xl leading-8 font-medium text-gray-500 dark:text-gray-400">
<span className="pt-8 ml-1 text-2xl font-medium leading-8 text-gray-500 dark:text-gray-400">
/month
</span>
</div>
</div>
<div className="px-6 pt-6 pb-8 bg-white dark:bg-gray-800 sm:p-10 sm:pt-6">
<ul>
<li className="mt-4 flex items-start">
<li className="flex items-start mt-4">
<div className="flex-shrink-0">
<svg
className="h-6 w-6 text-green-500"
className="w-6 h-6 text-green-500"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -39,10 +39,10 @@ const PricingCard4: FC = () => {
</div>
<p className="ml-3 text-base leading-6 text-gray-700 dark:text-gray-200">$10/month per user</p>
</li>
<li className="mt-4 flex items-start">
<li className="flex items-start mt-4">
<div className="flex-shrink-0">
<svg
className="h-6 w-6 text-green-500"
className="w-6 h-6 text-green-500"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -59,10 +59,10 @@ const PricingCard4: FC = () => {
Unlimited number of projects
</p>
</li>
<li className="mt-4 flex items-start">
<li className="flex items-start mt-4">
<div className="flex-shrink-0">
<svg
className="h-6 w-6 text-green-500"
className="w-6 h-6 text-green-500"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
Expand All @@ -81,7 +81,7 @@ const PricingCard4: FC = () => {
<div className="mt-6 rounded-md shadow">
<a
href="#"
className="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
className="flex items-center justify-center px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:shadow-outline"
>
Start team plan
</a>
Expand Down
24 changes: 12 additions & 12 deletions components/kit/components/commerce/pricing/PricingCard5.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,67 @@ import React, { FC } from 'react';

const PricingCard5: FC = () => {
return (
<section className="mb-4 w-72 border-t-8 px-2 py-1 bg-white dark:bg-gray-800 rounded border-purple-600 border-2">
<section className="px-2 py-1 mb-4 bg-white border-2 border-t-8 border-purple-600 rounded w-72 dark:bg-gray-800">
<section className="w-full">
<header className="text-3xl text-center md:mt-5 dark:text-white">Recruiter</header>
<header className="w-full md:flex justify-center text-center mb-2">
<header className="justify-center w-full mb-2 text-center md:flex">
<span className="text-6xl text-purple-600">50</span>
<span className="text-2xl dark:text-white">$</span>
<span className="line-through text-6xl dark:text-white">150</span>
<span className="text-6xl line-through dark:text-white">150</span>
</header>

<ul className="mt-5 p-1 text-md text-gray-600 dark:text-gray-200">
<li className="flex mb-1 py-1">
<ul className="p-1 mt-5 text-gray-600 text-md dark:text-gray-200">
<li className="flex py-1 mb-1">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
className="w-8 h-8 text-indigo-800 dark:text-white font-bold"
className="w-8 h-8 font-bold text-indigo-800 dark:text-white"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
&nbsp;Everything in Access
</li>
<li className="flex mb-1 py-1">
<li className="flex py-1 mb-1">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
className="w-8 h-8 text-indigo-800 dark:text-white font-bold"
className="w-8 h-8 font-bold text-indigo-800 dark:text-white"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
&nbsp;100+ members
</li>
<li className="flex mb-1 py-1">
<li className="flex py-1 mb-1">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
className="w-8 h-8 text-indigo-800 dark:text-white font-bold"
className="w-8 h-8 font-bold text-indigo-800 dark:text-white"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
&nbsp;All videos
</li>
<li className="flex mb-1 py-1">
<li className="flex py-1 mb-1">
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
className="w-8 h-8 font-bold dark:text-white text-indigo-800"
className="w-8 h-8 font-bold text-indigo-800 dark:text-white"
>
<path d="M5 13l4 4L19 7"></path>
</svg>
Expand Down
Loading

0 comments on commit bf5c636

Please sign in to comment.