All Components

Browse all available Tailwind CSS components

Navigation Components Component

A navigation component with a dark theme, responsive design, and no JavaScript.

                <nav class="bg-gray-800">
  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-3.75 17.25h16.5" />
          </svg>
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex flex-shrink-0 items-center">
          <img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
          <img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
        </div>
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Team</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Projects</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.248 24.248 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="relative ml-3">
          <div>
            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
            </button>
          </div>

          <!--
            Dropdown menu, show/hide based on menu state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->
          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <!-- Active: "bg-gray-100", Not Active: "" -->
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Team</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Projects</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

Infographics Component

A responsive infographics component with engaging microinteractions and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    <div class="ml-3">
      <h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
      <span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
    </div>
  </div>
</div>

Activity Feed Component

A responsive activity feed component designed for dark mode UI using Tailwind CSS.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
    <ul class="space-y-4">
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Commented on your post</p>
                <span class="text-gray-500 text-sm">2 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-gray-400">Liked your photo</p>
                <span class="text-gray-500 text-sm">4 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Sam Wilson</p>
                <p class="text-gray-400">Started following you</p>
                <span class="text-gray-500 text-sm">6 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Lisa Ray</p>
                <p class="text-gray-400">Shared your article</p>
                <span class="text-gray-500 text-sm">1 day ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Michael Brown</p>
                <p class="text-gray-400">Added a photo</p>
                <span class="text-gray-500 text-sm">2 days ago</span>
            </div>
        </li>
    </ul>
</div>

Skeuomorphic Cards Component

Inspired by Skeuomorphism, the following card component is fully responsive with dark theme support. For dark mode, CSS support is sufficient. No JavaScript is needed.

Open Preview

                <div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- Card 1 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</p>
      <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Developer</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</p>
        <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">Designer</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Card 3 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</p>
            <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
        </div>
      </div>
    </div>
  </div>

</div>

<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>

Functional Components Component

A functional component with 3D design, responsive effects, and dark mode support, implemented using Tailwind CSS.

Open Preview

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
   <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
</div>

Pagination Component

A responsive Pagination component designed with 3D elements and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex justify-center items-center mt-6">
    <nav aria-label="Pagination">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_left</span>
                </a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">1</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">2</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">3</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">...</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">10</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    .text-gray-700 {
        color: #e5e7eb;
    }
    .border-gray-300 {
        border-color: #4b5563;
    }
}
</style>

Progress Indicators Component

A retro/vintage styled progress indicators component featuring responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
    </div>
</div>

File Viewer Component

A responsive file viewer component styled with Material Design principles using Tailwind CSS, featuring dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Document Title</h3>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <span class="font-medium">John Doe</span></p>
    </div>
    <div class="flex flex-col items-center mb-4">
        <img src="https://picsum.photos/200/100" alt="File Preview" class="rounded-lg shadow-md mb-4" />
        <p class="text-gray-700 dark:text-gray-300 text-center">File Description: This is a placeholder file viewer that shows brief file details and presentation.</p>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-gray-600 dark:text-gray-400">File Size: 2.3 MB</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow">Download</button>
    </div>
</div>

Retro Tooltip Component

A retro/vintage-themed tooltip component with responsive effects and dark mode support.

Open Preview

                <style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

  .tooltip-retro {
    font-family: 'Press Start 2P', cursive;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-retro .tooltip-content {
    visibility: hidden;
    width: 120px;
    background-color: #33 некоторого number; /* Retro dark background */
    color: #0f0; /* Neon green text */
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #0f0; /* Neon green border */
    box-shadow: 0 0 10px #0f0; /* Neon green glow */
  }

  .tooltip-retro .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0f0 transparent transparent transparent; /* Neon green triangle */
  }

  .tooltip-retro:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
  }

  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    .tooltip-retro .tooltip-content {
      background-color: #0f0; /* Neon green background in dark mode */
      color: #333; /* Dark text in dark mode */
      border-color: #333; /* Dark border in dark mode */
      box-shadow: 0 0 10px #333; /* Dark glow in dark mode */
    }

    .tooltip-retro .tooltip-content::after {
      border-color: #333 transparent transparent transparent; /* Dark triangle in dark mode */
    }
  }

  /* Responsive effects */
  @media (max-width: 600px) {
    .tooltip-retro .tooltip-content {
      width: 80px;
      margin-left: -40px;
    }
  }
</style>

<div class="tooltip-retro">
  Hover over me
  <span class="tooltip-content">Retro Tooltip!</span>
</div>

Skeuomorphism Card Component

A responsive Skeuomorphism-style card component with dark mode support using Tailwind CSS. It includes placeholder images and avatars.

Open Preview

                <div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
    <div class="absolute bottom-0 right-0 -mb-4 mr-4">
      <img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    </div>
  </div>
  <div class="mt-6">
    <h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
    <p class="text-gray-700 dark:text-gray-300">
      This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
    </p>
  </div>
  <div class="mt-4 flex justify-between items-center">
    <span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
      Read More
    </button>
  </div>
</div>

1 ... 214 215 216 217 218 ... 242

Categories

All Components