All Components

SkeuomorphicChatWindow

A chat window web component styled with Skeuomorphism and Tailwind CSS. Features responsive layout, dark theme support via CSS, rounded message bubbles, gradients, and shadows for a tactile feel. Includes placeholder avatars and images. No JavaScript included.

Open Preview

                <div class="flex flex-col w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 dark:text-white">
  <!-- Header -->
  <div class="flex items-center p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md dark:from-blue-800 dark:to-blue-900">
    <img class="w-8 h-8 rounded-full mr-3 border-2 border-white shadow" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    <span class="font-semibold text-lg">John Doe</span>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 p-4 h-64 overflow-y-auto space-y-4 bg-gray-50 dark:bg-gray-800">
    <!-- Received Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Hey, how's it going?</p>
      </div>
    </div>

    <!-- Sent Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>I'm doing well, thanks! How about you?</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- Received Image Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
          <img src="https://picsum.photos/id/237/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
    </div>

     <!-- Sent Image Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
           <img src="https://picsum.photos/id/23/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- More messages for scrolling -->
      <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
      <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>


  </div>

  <!-- Input Area -->
  <div class="flex items-center p-3 border-t border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
    <input type="text" placeholder="Type a message..." class="flex-1 rounded-lg px-4 py-2 mr-3 bg-white border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-md hover:from-green-600 hover:to-green-700 dark:from-green-700 dark:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900">Send</button>
  </div>
</div>

Shopping Cart Component

Shopping Cart Component with Microinteractions style, responsive effects, and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
          <span class="text-gray-600 dark:text-gray-300">3 items</span>
        </div>
        <hr class="mt-4">
        <div class="mt-8">
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
           <div class="flex items-center">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <hr class="mt-8">
        <div class="mt-4 flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
          <span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
        </div>
        <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
          Checkout
        </button>
      </div>
    </div>
  </div>
</div>

Charts Component

A minimalist charts component with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
      <div class="text-lg font-bold text-green-500">$12,450</div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
      <div class="text-lg font-bold text-blue-500">$5,600</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
  </div>
</div>

Loaders Component

A responsive loaders component with dark-mode support.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-16 h-16 border-4 border-blue-400 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>

Glassmorphism Carousel Slider Component

Carousel Slider Component with Glassmorphism design and dark mode support.

Open Preview

                <div class="relative w-full" data-carousel="static">
    <!-- Carousel wrapper -->
    <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
         <!-- Item 1 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image1/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
            <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 1 Title</h2>
            </div>
        </div>
        <!-- Item 2 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item="active">
            <img src="https://picsum.photos/seed/image2/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 2 Title</h2>
            </div>
        </div>
        <!-- Item 3 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image3/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 3 Title</h2>
            </div>
        </div>
        <!-- Item 4 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image4/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 4 Title</h2>
            </div>
        </div>
        <!-- Item 5 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
            <img src="https://picsum.photos/seed/image5/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
             <div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
                <h2 class="text-white text-3xl font-bold">Slide 5 Title</h2>
            </div>
        </div>
    </div>
    <!-- Slider indicators -->
    <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
        <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
        <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
    </div>
    <!-- Slider controls -->
    <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
             <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="sr-only">Previous</span>
        </span>
    </button>
    <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 9l4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
    </button>
</div>

Add to Cart Button Component

A brutalism-inspired Add to Cart button component with Tailwind CSS, featuring high contrast, unusual layouts, responsive effects, and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
    <div class="flex flex-col items-center text-center">
        <h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
        <button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
            Add to Cart
        </button>
    </div>
</div>

Dark Mode Navigation Bar

Navigation Bar Component with responsive effects and dark theme support.

Open Preview

                <nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Brutalist Navigation Component

A brutalist navigation component with responsive behavior and dark theme support.

Open Preview

                <nav class="bg-yellow-400 dark:bg-purple-900 p-6 font-mono border-4 border-black dark:border-yellow-400">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-black dark:text-yellow-400">Brutal Nav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Home</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Docs</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Examples</a></li>
    </ul>
  </div>
</nav>

Skip to Content Link Component

Glassmorphism Skip to Content Link featuring a frosted glass effect, blur, responsiveness, and dark mode support using Tailwind CSS, with no JavaScript.

Open Preview

                <a href="#content" class="block sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white/30 focus:backdrop-filter focus:backdrop-blur-lg focus:text-gray-800 focus:px-4 focus:py-2 focus:rounded-md dark:focus:bg-gray-800/30 dark:focus:text-white">Skip to Content</a>

Functional Components Component

Open Preview

                <section class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300">
  <div class="container mx-auto px-6 py-20">
    <h2 class="text-center text-3xl font-semibold capitalize lg:text-4xl">
      Our Functional Components
    </h2>

    <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3">
      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/1.jpg"
            alt=""
          />

          <h3 class="mt-4 text-2xl font-semibold capitalize dark:text-white">
            Component One
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/women/1.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Two
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div
        class="dark:hover:border-primary-500 rounded-xl border-2 border-transparent px-12 py-8 transition-colors duration-300 hover:border-blue-500"
      >
        <div class="flex flex-col items-center">
          <img
            class="h-14 w-14 rounded-full object-cover"
            src="https://randomuser.me/api/portraits/men/2.jpg"
            alt=""
          />

          <h3 class="dark:text-white mt-4 text-2xl font-semibold capitalize">
            Component Three
          </h3>

          <p class="mt-2 text-center capitalize">
            Lorem ipsum dolor sit amet consectetur.
          </p>

          <div class="mt-4 flex">
            <a href="#" class="mx-2 text-gray-600 dark:text-gray-300">
              <svg
                class="h-5 w-5 fill-current"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 2C6.48 2 2 6.48 2 12C2 16.42 4.87 20.17 8.84 21.5V14.91H6.05V12H8.84V9.31C8.84 6.59 10.42 5.07 13.04 5.07C14.35 5.07 15.52 5.31 15.94 5.31V7.8H14.54C13.17 7.8 12.89 8.5 12.89 9.41V12H15.39L14.71 14.91H12.89V21.5C16.88 20.17 19.76 16.42 19.76 12C19.76 6.48 15.28 2 12 2Z"
                ></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Categories