In this section we will create simple react tailwind css sidebar, react tailwind admin dashboard, react tailwind dark admin panel and react tailwind sidebar in react examples with Tailwind CSS.
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Tool Use
Tailwind CSS 3.x
Heroicons icon
React JS
Example 1
React tailwind css simple sidebar dashboard.
import React from "react";
export default function Sidebar() {
return (
<div className="flex">
<div className="flex flex-col h-screen p-3 bg-white shadow w-60">
<div className="space-y-3">
<div className="flex items-center">
<h2 className="text-xl font-bold">Dashboard</h2>
</div>
<div className="flex-1">
<ul className="pt-2 pb-4 space-y-1 text-sm">
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
<span>Home</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<span>Inbox</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg>
<span>Orders</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<span>Settings</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="container mx-auto mt-12">
<div className="grid grid-cols-1 gap-6 mb-6 lg:grid-cols-3">
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total users
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
12,00
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Profit
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
$ 450k
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Orders
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
20k
</div>
</div>
</div>
</div>
</div>
);
}
react tailwind sidebar
Example 2
React tailwind css simple sidebar with search form.
import React from "react";
export default function Sidebar() {
return (
<div className="flex">
<div className="flex flex-col h-screen p-3 bg-white shadow w-60">
<div className="space-y-3">
<div className="flex items-center">
<h2 className="text-xl font-bold">Dashboard</h2>
</div>
<div className="relative">
<span className="absolute inset-y-0 left-0 flex items-center py-4">
<button
type="submit"
className="p-2 focus:outline-none focus:ring"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</span>
<input
type="search"
name="Search"
placeholder="Search..."
className="w-full py-2 pl-10 text-sm rounded-md focus:outline-none"
/>
</div>
<div className="flex-1">
<ul className="pt-2 pb-4 space-y-1 text-sm">
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
<span>Home</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<span>Inbox</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg>
<span>Orders</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<span>Settings</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="container mx-auto mt-12">
<div className="grid grid-cols-1 gap-6 mb-6 lg:grid-cols-3">
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total users
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
12,00
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Profit
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
$ 450k
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Orders
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
20k
</div>
</div>
</div>
</div>
</div>
);
}
react tailwind dashboard sidebar
Example 3
React tailwind black color sidebar.
import React from "react";
export default function Sidebar() {
return (
<div className="flex">
<div className="flex flex-col h-screen p-3 bg-gray-800 shadow w-60">
<div className="space-y-3">
<div className="flex items-center">
<h2 className="text-xl font-bold text-white">Dashboard</h2>
</div>
<div className="relative">
<span className="absolute inset-y-0 left-0 flex items-center py-4">
<button
type="submit"
className="p-2 focus:outline-none focus:ring"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</span>
<input
type="search"
name="Search"
placeholder="Search..."
className="w-full py-2 pl-10 text-sm rounded-md focus:outline-none"
/>
</div>
<div className="flex-1">
<ul className="pt-2 pb-4 space-y-1 text-sm">
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
<span className="text-gray-100">Home</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<span className="text-gray-100">Inbox</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg>
<span className="text-gray-100">Orders</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<span className="text-gray-100">Settings</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
<span className="text-gray-100">Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="container mx-auto mt-12">
<div className="grid grid-cols-1 gap-6 mb-6 lg:grid-cols-3">
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total users
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
12,00
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Profit
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
$ 450k
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Orders
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
20k
</div>
</div>
</div>
</div>
</div>
);
}
react tailwind dark admin panel sidebar
Example 4
React Tailwind collapsible sidebar using useState hooks.
import { useState } from "react";
export default function Sidebar() {
const [open, setOpen] = useState(false);
return (
<div className="flex">
<div
className={` ${
open ? "w-40" : "w-60 "
} flex flex-col h-screen p-3 bg-gray-800 shadow duration-300`}
>
<div className="space-y-3">
<div className="flex items-center justify-between">
<h2 className="text-xl font-bold text-white">
Dashboard
</h2>
<button onClick={() => setOpen(!open)}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h8m-8 6h16"
/>
</svg>
</button>
</div>
<div className="relative">
<span className="absolute inset-y-0 left-0 flex items-center py-4">
<button
type="submit"
className="p-2 focus:outline-none focus:ring"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
</span>
<input
type="search"
name="Search"
placeholder="Search..."
className="w-full py-2 pl-10 text-sm rounded-md focus:outline-none"
/>
</div>
<div className="flex-1">
<ul className="pt-2 pb-4 space-y-1 text-sm">
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
<span className="text-gray-100">Home</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<span className="text-gray-100">Inbox</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg>
<span className="text-gray-100">
Orders
</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<span className="text-gray-100">
Settings
</span>
</a>
</li>
<li className="rounded-sm">
<a
href="#"
className="flex items-center p-2 space-x-3 rounded-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-gray-100"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
/>
</svg>
<span className="text-gray-100">
Logout
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div className="container mx-auto mt-12">
<div className="grid grid-cols-1 gap-6 mb-6 lg:grid-cols-3">
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total users
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
12,00
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Profit
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
$ 450k
</div>
</div>
<div className="w-full px-4 py-5 bg-white rounded-lg shadow">
<div className="text-sm font-medium text-gray-500 truncate">
Total Orders
</div>
<div className="mt-1 text-3xl font-semibold text-gray-900">
20k
</div>
</div>
</div>
</div>
</div>
);
}
Read Also
React Tailwind CSS Accordion (FAQ) Example
React Tailwind CSS Tabs Examples
How to use Tailwind CSS 3 with Headless UI In React
Toggle Switch in React JS with Tailwind CSS Example
Create Reusable Button Component with React & Tailwind CSS
React Tailwind CSS Search Bar Example
React Tailwind CSS Sidebar Example
React JS Login Form with Tailwind CSS Example
React Responsive Navbar Menu With Tailwind CSS Example
How to install Tailwind CSS in React
React Tailwind CSS Dialog (Modal) Example
React Tailwind Registration Form Example
