Search Components

All Components

Browse all available Tailwind CSS components

Tabs Component

A responsive tabs component designed for social media interfaces, featuring microinteractions and a dark theme. The component includes multiple interactive elements and uses Tailwind CSS.

Open Preview

                <div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
    <div class="flex space-x-4 border-b border-gray-700">
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
    </div>
    <div class="mt-4">
        <div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
            <h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
            <p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
            <div class="mt-4">
                <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                    <span class="text-gray-200 dark:text-gray-300">User Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

A Neumorphism-style OAuth Buttons component designed for a blog or content consumption platform. The component features buttons for various OAuth providers with a responsive design, dark theme support, and a monochromatic color scheme.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 1</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 2</span>
        </a>
        <a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            <img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
            <span class="text-gray-800 dark:text-gray-200">Provider 3</span>
        </a>
    </div>
</div>

<style>
  .shadow-neumorphism {
    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2), 
                -5px -5px 15px rgba(0, 0, 0, 0.2);
  }
</style>

Badges Component

A versatile Badges Component designed for business/corporate websites, utilizing Earth tones in a dark mode UI to enhance user experience. The component features responsiveness with some interactive elements.

Open Preview

                <div class="flex flex-wrap justify-center p-6 bg-gray-900 text-gray-300">
    <!-- Badge 1 -->
    <div class="bg-green-800 dark:bg-green-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Project Leader</span>
    </div>
    <!-- Badge 2 -->
    <div class="bg-brown-800 dark:bg-brown-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Senior Developer</span>
    </div>
    <!-- Badge 3 -->
    <div class="bg-yellow-800 dark:bg-yellow-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>UI/UX Designer</span>
    </div>
    <!-- Badge 4 -->
    <div class="bg-gray-800 dark:bg-gray-600 text-white rounded-full px-4 py-2 mx-2 mb-4 transition-transform transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
        <span>Content Strategist</span>
    </div>
</div>

Dashboards Component

Responsive Dashboards Component with Microinteractions, Grayscale color scheme, and Complex complexity level tailored for Blog/Content purpose. Supports dark theme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Content Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero et diam euismod, vitae elementum.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

    <!-- Content Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/600/400" alt="Article thumbnail">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Article Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            <span class="text-gray-700 dark:text-gray-300 text-sm">Peter Jones</span>
          </div>
          <a href="#" class="text-gray-900 dark:text-white hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>

  </div>
</div>

Site Map Component

A responsive site map component designed with glassmorphism, featuring a frosted glass-like translucent effect and blur for a portfolio showcasing work or products. It supports a dark theme and utilizes complementary colors while maintaining a moderate complexity.

Open Preview

                <div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
            </div>
        </div>
    </div>
    <footer class="text-center text-gray-600 dark:text-gray-400">
        <p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
        <p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
    </footer>
</div>

Activity Feed Component

A complex activity feed component for e-commerce with microinteractions and a dark theme, styled using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

Interactive Components Component

Interactive Components Component with 3D Design, Monochromatic color scheme, and Moderate complexity for E-commerce, with responsive design and dark theme support.

Open Preview

                
<div class="bg-gray-100 dark:bg-gray-800 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
      <p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
    </div>
    <div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Repeat product block for more products -->
      <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

       <div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
        <div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
        </div>
        <div class="p-4">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
          <div class="mt-3 flex items-center justify-between">
            <p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Footer Navigation Component

A responsive footer navigation component designed for business/corporate websites in dark mode, featuring a triadic color scheme and medium complexity with interactive features.

Open Preview

                <footer class="bg-gray-800 text-gray-200 py-6">
    <div class="container mx-auto flex justify-between items-center flex-wrap">
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Company Info</h4>
            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Quick Links</h4>
            <ul>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Contact Us</h4>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <div class="text-sm">
                    <p>John Doe</p>
                    <p>[email protected]</p>
                </div>
            </div>
            <p class="text-sm">Reach out to us for any inquiries.</p>
        </div>
    </div>
    <div class="bg-gray-700 text-center py-4 mt-4">
        <p class="text-sm">&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

Price Display Component

A responsive Price Display Component with Neumorphism style and complementary color scheme, designed for blog content with dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Price Card -->
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">

    <!-- Card Header -->
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
      <span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
    </div>

    <!-- Card Features -->
    <ul class="space-y-4 text-gray-700 dark:text-gray-300">
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
        <span>10 Users</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
        <span>50GB Storage</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
        <span>Email Support</span>
      </li>
    </ul>

    <!-- Call to Action Button -->
    <div class="mt-8">
      <button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
        Get Started
      </button>
    </div>

  </div>

  <!-- Custom Neumorphism Shadows (defined in CSS) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
       box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
    }
     .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
    }
     .dark .shadow-neumorphic-button-dark {
       box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
    }
  </style>

</div>

Timeline Component

A minimalist timeline component designed for blog and content consumption, featuring earth tone colors and dark mode support using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Timeline</h1>
    <div class="relative">
        <div class="border-l border-gray-300 dark:border-gray-700 ml-6">
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/1/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 1</h2>
                        <p class="text-gray-600 dark:text-gray-400">Description of the event that took place. It was a significant moment.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-02-14</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/2/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 2</h2>
                        <p class="text-gray-600 dark:text-gray-400">Another description of an important event that happened.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-03-01</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/3/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 3</h2>
                        <p class="text-gray-600 dark:text-gray-400">A brief overview of an event that marked a milestone.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-04-10</span>
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <div class="flex items-center">
                    <div class="bg-green-500 rounded-full w-6 h-6 mr-4">
                        <img src="https://picsum.photos/seed/4/100" alt="Event Image" class="rounded-full" />
                    </div>
                    <div>
                        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Event Title 4</h2>
                        <p class="text-gray-600 dark:text-gray-400">Final event description summarizing the timeline.</p>
                        <span class="text-xs text-gray-500 dark:text-gray-500">Date: 2023-05-15</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 ... 242 243 244 245 246 ... 335

Search Components

Categories

All Components

Tabs Component

OAuth Buttons Component

Badges Component

Dashboards Component

Site Map Component

Activity Feed Component

Interactive Components Component

Footer Navigation Component

Price Display Component

Timeline Component