Search Components

All Components

Browse all available Tailwind CSS components

Glassmorphism Checkout Form Component

Glassmorphism Checkout Form Component with Earth Tones color scheme, moderate complexity, and responsive design with dark theme support. Suitable for blog/content purposes.

Open Preview

                <div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
        </div>
        <div class="divide-y divide-stone-200">
          <div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
            </div>
            <div class="relative">
              <button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Interactive Components Component

A social media interactive component designed with dark mode and monochromatic color scheme.

Open Preview

                <div class="bg-gray-900 text-gray-100 min-h-screen p-6">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
        <div class="p-4 border-b border-gray-700">
            <h2 class="text-xl font-bold">Interactive Components</h2>
            <p class="text-gray-400">Engage with your network in style.</p>
        </div>
        <div class="flex items-center p-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h3 class="font-semibold">John Doe</h3>
                <p class="text-gray-500 text-sm">@johndoe</p>
            </div>
        </div>
        <div class="p-4">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
            <p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
        </div>
        <div class="flex justify-between p-4 border-t border-gray-700">
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
        </div>
    </div>
</div>

Shopping Cart Component

A simple and minimalist shopping cart component using Tailwind CSS, with earth tones color scheme, social media purpose, and dark theme support. It is responsive and includes sample items. This component is designed for basic display with minimal elements and no JavaScript.

Open Preview

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
  <div class="space-y-4">
    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white font-bold">$39.98</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 3 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$9.50</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>
  </div>

  <!-- Cart Summary -->
  <div class="mt-6 flex justify-between items-center">
    <span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
    <span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
  </div>

  <button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
    Checkout
  </button>
</div>

360 Degree Viewer Component

360 degree viewer component with microinteractions, triadic color scheme, complex complexity, e-commerce purpose, responsive design, dark theme support, and Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-4">
  <div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="product-image w-full h-64 object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300">
        <button class="text-white text-2xl focus:outline-none">
          <i class="fas fa-expand"></i>
        </button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">
          Add to Cart
        </button>
      </div>
    </div>
    <div class="flex justify-center py-2 bg-gray-200 dark:bg-gray-700">
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-camera-rotate"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-magnifying-glass-plus"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-info-circle"></i>
      </button>
    </div>
  </div>
</div>

Product Gallery Component

A responsive product gallery component designed in a brutalism style with a pastel color scheme suitable for social media. It features high contrast, bold design elements and is optimized for dark mode.

Open Preview

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
        <div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
            <button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
        </div>
    </div>
</div>

Badges Component

A neumorphic Badges Component designed for blog content consumption with interactive elements and responsive design supporting dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">  
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>  
  <div class="grid grid-cols-3 gap-4">    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>    
    </div>    
    <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">      
      <img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">      
      <p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>    
    </div>  
  </div>  
  <div class="grid grid-cols-1 gap-4 mt-8">    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>    
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">      
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">      
      <div class="ml-4">        
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>        
        <p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>      
      </div>      
      <button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>    
    </div>  
  </div>  
</div>

Authentication Components Component

A Neumorphic designed authentication component for e-commerce with vibrant colors, dark theme support, and responsive design.

Open Preview

                <div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
        <h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
            </div>
            <button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-600">
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-400">or login with</p>
            <div class="flex justify-center mt-2">
                <img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
                <img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
            </div>
        </div>
    </div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";

.neumorphic {
    background: #e0e0e0;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}

.dark.neumorphic {
    background: #434343;
    box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}

.text-vibrant {
    color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>

Chat Window Component

A simple chat window component designed with 3D elements, earth tones color scheme, and responsive dark theme support.

Open Preview

                <div class="max-w-md mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-green-600 dark:bg-green-700 p-4">
        <h2 class="text-white text-lg font-semibold">Chat Window</h2>
    </div>
    <div class="p-4">
        <div class="flex items-start mb-4">
            <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-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Hello! How can I help you today?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">I'm looking for more information about your services.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg shadow-md">
                <p class="text-gray-800 dark:text-gray-200">Sure! Please check our portfolio.</p>
            </div>
        </div>
        <div class="flex items-center">
            <input type="text" placeholder="Type your message..." class="flex-1 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 shadow-sm" />
            <button class="ml-2 bg-green-600 dark:bg-green-700 text-white px-4 py-2 rounded-lg shadow-lg">Send</button>
        </div>
    </div>
</div>

Navigation Components Component

A responsive navigation component with dark mode support using Tailwind CSS. It includes a logo, navigation links, and a call-to-action button.

Open Preview

                <nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </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-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Container Component

A retro/vintage styled container component for portfolios, with a monochromatic color scheme and dark mode support.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
    <h1 class="text-4xl font-bold text-gray-100 dark:text-gray-200 mb-4">My Portfolio</h1>
    <p class="text-gray-300 dark:text-gray-400 mb-6">Showcasing my work from the nostalgic eras of the 80s and 90s.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 1</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 1 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 2</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 2 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 3</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 3 with a brief overview of the key elements and technologies used.</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-5 rounded-lg shadow-md">
            <img src="https://picsum.photos/400/300?random=4" alt="Project 4" class="rounded-lg mb-3">
            <h2 class="text-2xl font-semibold text-gray-200 dark:text-gray-300">Project Title 4</h2>
            <p class="text-gray-400 dark:text-gray-500">Description of project 4 with a brief overview of the key elements and technologies used.</p>
        </div>
    </div>

    <div class="mt-10 text-center">
        <h3 class="text-3xl font-bold text-gray-200 dark:text-gray-300 mb-4">About Me</h3>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-32 h-32 mx-auto mb-4">
        <p class="text-gray-300 dark:text-gray-400 max-w-md mx-auto">I'm a passionate developer with a love for retro designs and a knack for turning ideas into reality. Let's connect!</p>
    </div>
</div>

1 ... 262 263 264 265 266 ... 335

Search Components

Categories

All Components