Search Components

Interactive Components

Components that enable user interaction and input

Interactive Components Component

A complex interactive component for social media with skeuomorphic design and monochromatic color scheme.

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
        <h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
        <div class="flex items-center space-x-4 mb-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <div class="flex-1">
                <textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
                <div class="flex justify-between mt-2">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
                    <button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
            <div class="flex items-start space-x-3 mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
                <div class="flex-1">
                    <p class="text-gray-200 font-semibold">Jane Doe</p>
                    <p class="text-gray-400">Just had a great coffee!</p>
                    <img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
                    <div class="flex space-x-4 mt-2">
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
                            Like
                        </button>
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Interactive Components Component

Interactive Components Component Glassmorphism

Open Preview

                    
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg w-96">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
      <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
    </div>
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt Light Pink Product Image">
    <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here. It should be concise and informative.</p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Add to Cart</button>
  </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>

BrutalismPortfolioInteractive

Interactive Components Component with Brutalism design, Vibrant colors, and Complex layout for Portfolio purpose, responsive with dark theme support.

Open Preview

                <div class="bg-gray-900 dark:bg-black p-8 min-h-screen">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-yellow-400 dark:bg-pink-600 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Alpha</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Alpha, showcasing its features and impact.</p>
      <a href="#" class="inline-block bg-black text-yellow-400 dark:bg-white dark:text-pink-600 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">Learn More</a>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-pink-600 dark:bg-yellow-400 p-6 border-4 border-black dark:border-white shadow-brutal">
      <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
      <h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Beta</h3>
      <p class="mb-4 text-black dark:text-white">A description of Project Beta, highlighting its innovative aspects.</p>
      <a href="#" class="inline-block bg-black text-pink-600 dark:bg-white dark:text-yellow-400 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">View Case Study</a>
    </div>

    <!-- Interactive Contact Form -->
    <div class="md:col-span-2 bg-teal-400 dark:bg-purple-600 p-8 border-4 border-black dark:border-white shadow-brutal">
      <h3 class="text-3xl font-bold mb-6 text-black dark:text-white">Get in Touch</h3>
      <form action="#" method="post">
        <div class="mb-4">
          <label for="name" class="block text-black dark:text-white text-sm font-bold mb-2">Name:</label>
          <input type="text" id="name" name="name" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-black dark:text-white text-sm font-bold mb-2">Email:</label>
          <input type="email" id="email" name="email" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Email">
        </div>
        <div class="mb-6">
          <label for="message" class="block text-black dark:text-white text-sm font-bold mb-2">Message:</label>
          <textarea id="message" name="message" rows="6" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button type="submit" class="bg-black text-teal-400 dark:bg-white dark:text-purple-600 font-bold py-3 px-6 rounded border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:shadow-outline transition-colors">
            Send Message
          </button>
        </div>
      </form>
    </div>

    <!-- Testimonials/Avatar Section -->
    <div class="md:col-span-2 bg-red-500 dark:bg-blue-600 p-8 border-4 border-black dark:border-white shadow-brutal grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Working with this company was a game-changer!"</p>
        <p class="font-bold text-black dark:text-white">- Client A</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"Highly recommended for their creativity and skill."</p>
        <p class="font-bold text-black dark:text-white">- Client B</p>
      </div>
      <div class="text-center">
        <img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar 3" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white mb-2">"They exceeded all expectations!"</p>
        <p class="font-bold text-black dark:text-white">- Client C</p>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-brutal {
  box-shadow: 8px 8px 0 0 #000;
}

.dark .shadow-brutal {
  box-shadow: 8px 8px 0 0 #fff;
}
</style>

Interactive Components Component

An interactive component with Glassmorphism design, pastel color scheme, and simple layout for blog content. It is responsive and includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-teal-400 to-blue-500 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 dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Blog Post Title</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>This is a simple interactive component designed for blog content, featuring a Glassmorphism style with pastel colors.</p>
            <p>It is responsive and supports dark mode.</p>
          </div>
          <div class="pt-4 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <a href="#" class="text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-500">Read More &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Interactive Components Component

Interactive Components Component with Skeuomorphism design, Analogous color scheme, and Moderate complexity for Blog/Content purpose. Responsive design with dark theme support. No JavaScript code.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
    <div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex justify-between items-center mt-4">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" 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>
    <button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
  </div>
  <div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
      </svg>
      <span>Save</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
      </svg>
      <span>Share</span>
    </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>

Interactive Components Component

Interactive Components Component with Minimalist/Flat Design, Earth tones color scheme, and Complex complexity level for a Dashboard purpose, implemented with Tailwind CSS. Responsive design with dark theme support. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Header -->
  <header class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
      </div>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
    </div>
  </header>

  <!-- Main Content -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Card 1: Sales Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <!-- Placeholder for chart/graph -->
      <div class="bg-gray-200 dark:bg-gray-700 h-32 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
        Chart or Graph Placeholder
      </div>
    </div>

    <!-- Card 2: Recent Orders -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Orders</h2>
      <ul>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1001</span>
          <span class="text-green-600 dark:text-green-400">$150.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1002</span>
          <span class="text-green-600 dark:text-green-400">$220.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1003</span>
          <span class="text-green-600 dark:text-green-400">$95.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1004</span>
          <span class="text-green-600 dark:text-green-400">$310.00</span>
        </li>
        <li class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <span class="text-gray-700 dark:text-gray-300">Order #1005</span>
          <span class="text-green-600 dark:text-green-400">$180.00</span>
        </li>
      </ul>
    </div>

    <!-- Card 3: User Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">User Activity</h2>
      <!-- Placeholder for activity feed -->
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-2 text-gray-700 dark:text-gray-300">User A logged in.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User B updated profile.</li>
        <li class="py-2 text-gray-700 dark:text-gray-300">User C added a new product.</li>
      </ul>
    </div>

    <!-- Card 4: Statistics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Statistics</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Total Users</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">1,250</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Page Views</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">5,800</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Bounce Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">35%</p>
        </div>
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Conversion Rate</p>
          <p class="text-xl font-bold text-gray-800 dark:text-white">4.2%</p>
        </div>
      </div>
    </div>

    <!-- Card 5: Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h2>
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Add New Product</button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Generate Report</button>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">Send Notification</button>
      </div>
    </div>

    <!-- Card 6: Image Gallery (using picsum.photos) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 h-64 overflow-y-auto">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
      <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/id/1018/200/150" alt="Gallery Image 1" class="rounded-md">
        <img src="https://picsum.photos/id/1015/200/150" alt="Gallery Image 2" class="rounded-md">
        <img src="https://picsum.photos/id/1019/200/150" alt="Gallery Image 3" class="rounded-md">
        <img src="https://picsum.photos/id/103/200/150" alt="Gallery Image 4" class="rounded-md">
      </div>
    </div>

  </div>

</div>

Neumorphism Interactive Components Component

Neumorphism Interactive Components Component for Business/Corporate websites

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  
  <!-- Complex Component Section -->
  <section class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Interactive Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-blue-500 text-white text-lg font-semibold shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-green-500 text-white text-lg font-semibold shadow-lg hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-red-500 text-white text-lg font-semibold shadow-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300">Learn More</button>
      </div>
      
      <!-- Interactive Form Example -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3">
          <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Contact Us</h3>
          <form>
              <div class="mb-4">
                  <label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Name</label>
                  <input type="text" id="name" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                  <input type="email" id="email" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Message</label>
                  <textarea id="message" rows="4" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-700 text-gray-800 dark:text-gray-200"></textarea>
              </div>
              <button type="submit" class="py-2 px-6 rounded-full bg-gray-500 text-white text-lg font-semibold shadow-lg hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 transition duration-300">Send Message</button>
          </form>
      </div>

       <!-- Interactive Element with Image -->
        <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3 flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/seed/interactive/300/200" alt="Interactive Image" class="rounded-lg mb-6 md:mb-0 md:mr-8 shadow-xl">
            <div>
                <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Interactive Feature with Image</h3>
                <p class="text-gray-700 dark:text-gray-300 mb-6">This section includes an image to make the interactive element more engaging visually.</p>
                <button class="py-2 px-6 rounded-full bg-yellow-500 text-white text-lg font-semibold shadow-lg hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300">Explore Feature</button>
            </div>
        </div>

    </div>
  </section>

  <!-- Custom Shadows for Neumorphism -->
  <style>
    .shadow-2xl-dark {
      box-shadow: 9px 9px 16px #1c1c1c, -9px -9px 16px #262626;
    }
    .shadow-inner-dark {
      box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #262626;
    }
  </style>

</div>

Interactive Components Component

Interactive 3D Component with responsive effects and dark theme support

Open Preview

                <div class="dark:bg-gray-900 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase dark:text-indigo-400">Interactive</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
                A new way to engage
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>

        <div class="mt-10">
            <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Competitive exchange rates</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-6 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a2 2 0 002 2h9l.75-.75M7 16l3.5-3.5M14.25 8.25l.75-.75m0 0l2-2M7 16H3a2 2 0 00-2 2v2a2 2 0 002 2h14a2 2 0 002-2v-2a2 2 0 00-2-2h-4m5-10l2 2m0 0l2 2m0-4l-2-2m0 0l-2-2m-3 10l3.5-3.5" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">No hidden fees</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Transfers are instant</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

                <div class="relative">
                    <dt>
                        <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white transform -rotate-3 hover:rotate-0 transition duration-300 ease-in-out">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10m-9 4h4m-4 2h4M9 10H4a2 2 0 00-2 2v7a2 2 0 002 2h16a2 2 0 002-2v-7a2 2 0 00-2-2h-5l-.5-1.5z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">Mobile notifications</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

Search Components

Categories

Interactive Components