TailwindCSS Cards - WebDevTales

36 TailwindCSS Cards

Modern, responsive TailwindCSS cards for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="max-w-[15rem] max-h-[18rem] mx-auto p-4">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105 hover:shadow-xl">
      <div class="bg-gray-900 text-white p-3 font-mono text-sm flex justify-between items-center">
        <span class="font-bold">Code Window (Light Theme)</span>
        <button class="bg-blue-500 text-white px-2 py-1 rounded-md text-xs">Run</button>
      </div>
      <div class="p-5">
        <pre class="text-sm font-mono text-gray-800 whitespace-pre-wrap">
    <code>
    <span class="text-blue-500">const</span> <span class="text-green-500">greet</span> = () => {
      <span class="text-yellow-500">console</span>.log(<span class="text-red-500">'Hello, World!'</span>);
    }
    greet();
    </code>
        </pre>
      </div>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<section class="flex justify-center items-center w-full h-full py-10">
  <div class="relative group w-72 h-72 cursor-pointer transform-gpu perspective-1500">
      <!-- Front Side -->
      <div class="front bg-gradient-to-b from-blue-600 to-blue-800 w-full h-full rounded-xl flex items-center justify-center text-white text-6xl font-semibold shadow-lg group-hover:shadow-xl transition-all duration-300 relative transform-gpu group-hover:rotate-y-180">
          <i class="fas fa-cogs gear-icon group-hover:rotate-180 transition-transform duration-700 text-9xl"></i>
      </div>

      <!-- Back Side -->
      <div class="back absolute inset-0 bg-gradient-to-b from-green-500 to-green-700 w-full h-full rounded-xl flex flex-col items-center justify-center text-white p-4 text-center shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform-gpu group-hover:rotate-y-180">
          <h3 id='innovative-design'  id="boomdevs_6" id='innovative-design' id="boomdevs_6" class="text-2xl font-bold mb-4" >Innovative Design</h3>
          <p class="text-sm mb-4">Experience the best of modern design with cutting-edge features.</p>
          <button class="bg-orange-500 text-white py-2 px-4 rounded-lg hover:bg-orange-600 transition-colors duration-200">Learn More</button>
      </div>
  </div>
</section>

<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<style>
  /* Gear Rotation Animation */
  .gear-icon {
      transition: transform 1s ease-in-out;
  }

  .group:hover .gear-icon {
      transform: rotate(1360deg);
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-100 max-w-[15rem] max-h-[18rem] mx-auto p-4">
  <div class="bg-gray-900 rounded-lg shadow-lg overflow-hidden flex">
    <!-- Sidebar Menu -->
    <div class="bg-gray-800 text-white w-1/3 p-4 rounded-l-lg">
      <h3 id='sidebar'  id="boomdevs_9" id='sidebar'  id="boomdevs_9" class="font-bold text-lg mb-4"  >Sidebar</h3>
      <ul class="space-y-3 text-sm">
        <li><a href="#" class="text-gray-400 hover:text-gray-200">Dashboard</a></li>
        <li><a href="#" class="text-gray-400 hover:text-gray-200">Settings</a></li>
        <li><a href="#" class="text-gray-400 hover:text-gray-200">Notifications</a></li>
        <li><a href="#" class="text-gray-400 hover:text-gray-200">Help</a></li>
      </ul>
    </div>

    <!-- Code Window -->
    <div class="p-5 w-2/3 bg-gray-900 text-white rounded-r-lg">
      <div class="bg-gray-800 p-3 font-mono text-sm mb-4">
        <span class="font-bold">Code Window (Dark Theme with Sidebar)</span>
      </div>
      <pre class="text-sm font-mono">
<code>
<span class="text-teal-400">let</span> <span class="text-purple-400">user</span> = <span class="text-red-400">'John Doe'</span>;
<span class="text-yellow-500">const</span> <span class="text-blue-400">greet</span> = <span class="text-green-400">(name) => {
  <span class="text-orange-500">console</span>.log(<span class="text-pink-400">'Hello, '</span> + name);
};
greet(<span class="text-red-400">user</span>);
</code>
      </pre>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="w-[14rem] bg-gray-800 text-white shadow-lg rounded-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl hover:border-2 hover:border-indigo-500 p-6">
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center">
        <svg
          class="h-6 w-6 text-yellow-400 hover:text-yellow-500 transform transition-all"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M9 18V5l12-2v13"></path>
          <circle cx="6" cy="18" r="3"></circle>
          <circle cx="18" cy="16" r="3"></circle>
        </svg>
        <div class="mx-3">
          <h3 id="boomdevs_12" id="boomdevs_12" class="text-lg font-medium text-gray-300 hover:text-indigo-500 transform transition-all">
            My Playlist
          </h3>
          <p class="text-gray-400 hover:text-gray-300 transform transition-all">Artist: Dibbya Subba</p>
        </div>
      </div>
      <div class="flex items-center">
        <svg
          class="h-6 w-6 text-red-400 hover:text-red-500 transform transition-all"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
          ></path>
        </svg>
        <svg
          class="h-6 w-6 text-gray-500 hover:text-gray-400 ml-4 transform transition-all"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polygon
            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
          ></polygon>
        </svg>
      </div>
    </div>

    <div class="px-6 py-4">
      <div class="flex items-center mb-3">
        <svg
          class="h-5 w-5 text-gray-400 hover:text-gray-300 transform transition-all"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
        </svg>
        <div class="w-full mx-3">
          <div
            class="relative mt-1 h-1 bg-gray-600 rounded overflow-hidden dark:bg-gray-700"
          >
            <div class="absolute left-0 top-0 h-full bg-indigo-500 w-2/3 hover:w-full transition-all"></div>
          </div>
        </div>
        <p class="text-sm text-gray-500 hover:text-gray-400 transform transition-all">67%</p>
      </div>

      <div
        class="flex justify-between text-sm text-gray-400 hover:text-gray-300 mt-3"
      >
        <span> 01:10 </span><span> 4:00 </span>
      </div>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="w-[14rem] bg-gray-800 text-white shadow-xl rounded-lg overflow-hidden transform transition-all hover:bg-gradient-to-r hover:from-pink-500 hover:to-blue-500 hover:text-white p-6">
    <h3 id="boomdevs_15" id="boomdevs_15" class="text-xl font-medium text-gray-300 transform transition-all hover:text-white hover:shadow-lg">
      Amazing Projects
    </h3>
    <p class="text-sm text-gray-400 transform transition-all hover:text-white hover:shadow-md mt-2">
      Explore creative and innovative ideas brought to life.
    </p>
    
    <div class="mt-4">
      <button class="w-full py-2 bg-indigo-500 text-white rounded-full transform transition-all hover:bg-indigo-600 hover:scale-105">
        View Projects
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="relative w-[14rem] h-[20rem] bg-gradient-to-br from-gray-800 via-gray-900 to-gray-700 text-white shadow-xl rounded-lg overflow-hidden p-6 transform transition-all hover:scale-105 hover:shadow-2xl hover:border-4 hover:border-neon-pink group">
    <!-- Glow Effect Border -->
    <div class="absolute inset-0 rounded-lg border-4 border-transparent opacity-0 group-hover:opacity-100 animate-pulse" style="box-shadow: 0 0 20px rgba(255, 64, 129, 0.7), 0 0 40px rgba(255, 64, 129, 0.7);"></div>

    <!-- Icon -->
    <div class="flex justify-center mb-4">
      <div class="w-12 h-12 bg-indigo-500 rounded-full flex justify-center items-center transform group-hover:scale-110 transition-all">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 010-5.656m0 5.656L16.95 16.95m-2.122-2.122a4 4 0 01-5.656 0m5.656 0L12 12m-5.657 5.657A8 8 0 0112 4a8 8 0 018 8 8 8 0 01-8 8v-1.414a4 4 0 01-5.657-5.657z" />
        </svg>
      </div>
    </div>

    <!-- Title -->
    <div class="text-center">
      <h3 id='neon-glow-card'  id="boomdevs_18" id='neon-glow-card'  id="boomdevs_18" class="text-xl font-medium text-gray-300 group-hover:text-neon-pink transition-all"  >Neon Glow Card</h3>
      <p class="text-sm text-gray-400 mt-2 group-hover:text-gray-100 transition-all">Hover to see the neon effect!</p>
    </div>

    <!-- Buttons -->
    <div class="mt-6 space-y-3">
      <button class="w-full py-2 bg-indigo-500 text-white rounded-full transform transition-all hover:bg-indigo-600 hover:shadow-[0_0_10px_#6366f1,0_0_20px_#6366f1] group-hover:scale-105">
        Explore
      </button>
      <a href="#" class="block text-center text-sm text-gray-400 hover:text-neon-pink group-hover:underline transition-all">
        Learn More
      </a>
    </div>
  </div>
</div>

<style>
  .hover\:border-neon-pink:hover {
    border-color: #ff4081;
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.8), 0 0 20px rgba(255, 64, 129, 0.8);
  }

  .group:hover h3 {
    text-shadow: 0px 0px 20px rgba(255, 64, 129, 1), 0px 0px 30px rgba(255, 64, 129, 0.8);
  }

  .group:hover .absolute {
    animation: pulse-glow 1.5s infinite;
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(255, 64, 129, 0.7), 0 0 40px rgba(255, 64, 129, 0.7);
    }
    50% {
      box-shadow: 0 0 30px rgba(255, 64, 129, 1), 0 0 60px rgba(255, 64, 129, 1);
    }
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="w-[16rem] bg-white text-gray-800 shadow-lg rounded-xl overflow-hidden p-5 transform transition-all hover:bg-gray-50 hover:scale-105 hover:shadow-2xl">
    <!-- Icon -->
    <div class="flex justify-center items-center mb-3">
      <svg class="h-12 w-12 text-indigo-500 hover:text-indigo-600 transition-all transform hover:scale-110" fill="none" height="40" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 18V5l12-2v13"></path>
        <circle cx="6" cy="18" r="3"></circle>
        <circle cx="18" cy="16" r="3"></circle>
      </svg>
    </div>
    <!-- Title -->
    <h3 id='relaxing-beats'  id="boomdevs_21" id='relaxing-beats'  id="boomdevs_21" class="text-lg font-semibold text-gray-700 text-center hover:text-indigo-500"  >Relaxing Beats</h3>
    <p class="text-sm text-gray-500 text-center hover:text-gray-600">Artist: Jane Doe</p>
    
    <!-- Progress Bar -->
    <div class="mt-4">
      <div class="relative">
        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
          <div class="h-full bg-gradient-to-r from-indigo-400 via-indigo-500 to-indigo-600 w-2/3 transition-all"></div>
        </div>
      </div>
      <div class="flex justify-between text-xs text-gray-400 mt-2">
        <span>00:45</span>
        <span>3:30</span>
      </div>
    </div>
    
    <!-- Play Button -->
    <div class="flex justify-center items-center mt-5">
      <button class="w-12 h-12 bg-indigo-500 text-white rounded-full flex justify-center items-center transform transition-all hover:bg-indigo-600 hover:shadow-[0_0_15px_#6366f1,0_0_30px_#6366f1]">
        <svg class="h-6 w-6 text-white" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 17l5-5-5-5v10z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <!-- Card Container -->
  <div class="w-[14rem] h-[18rem] bg-white text-gray-800 shadow-lg rounded-lg overflow-hidden p-6 transform transition-all hover:scale-105 hover:shadow-2xl hover:border-4 hover:border-indigo-500">
    <h3 id='progress-tracker'  id="boomdevs_24" id='progress-tracker'  id="boomdevs_24" class="text-xl font-semibold text-gray-800"  >Progress Tracker</h3>
    <p class="text-sm text-gray-500 mt-2">Track your progress and stay motivated!</p>
    
    <!-- Progress Bar -->
    <div class="mt-6">
      <div class="relative pt-1">
        <div class="flex mb-2 items-center justify-between">
          <div>
            <!-- Dynamic Value -->
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
              <span id="progress-value">85%</span>
            </span>
          </div>
        </div>
        <div class="flex mb-2">
          <!-- Background Bar -->
          <div class="w-full bg-gray-300 rounded-full h-2">
            <!-- Neon Gradient Progress Bar -->
            <div id="progress-bar" class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Button -->
    <div class="mt-4">
      <button class="w-full py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-full transform transition-all hover:bg-indigo-700">
        Keep Going
      </button>
    </div>
  </div>
</div>
 
<script>
  // Change this value to dynamically update the progress bar
  const progressValue = 85; // Set your progress value here (e.g., 85%)

  // Update the progress bar dynamically
  const progressBar = document.getElementById('progress-bar');
  const progressText = document.getElementById('progress-value');

  // Update the styles and text content
  progressBar.style.width = `${progressValue}%`;
  progressText.textContent = `${progressValue}%`;
</script>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <!-- Pricing Card -->
  <div class="w-[14rem] bg-white rounded-lg shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
    <!-- Header -->
    <div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white text-center p-4">
      <h2 id='premium-plan'  id="boomdevs_27" id='premium-plan'  id="boomdevs_27" class="text-lg font-bold"  >Premium Plan</h2>
      <p class="text-sm mt-1">Best for professionals</p>
    </div>
    <!-- Price -->
    <div class="text-center py-6">
      <p class="text-gray-800 text-3xl font-bold">$49<span class="text-lg text-gray-600">/month</span></p>
    </div>
    <!-- Features -->
    <ul class="px-6 py-4 text-gray-700 space-y-2">
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M5 13l4 4L19 7"></path>
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M5 13l4 4L19 7"></path>
        </svg>
        Premium Support
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M5 13l4 4L19 7"></path>
        </svg>
        Advanced Analytics
      </li>
    </ul>
    <!-- Button -->
    <div class="px-6 py-4">
      <button class="w-full py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-lg transform transition-all hover:scale-105 hover:bg-indigo-700">
        Get Started
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="max-w-[15rem] max-h-[18rem] mx-auto p-4 group flex justify-center items-center min-h-screen">
  <div class="transition-all transform group-hover:bg-gray-900 group-hover:text-white bg-white rounded-lg shadow-lg overflow-hidden hover:scale-105 hover:shadow-xl">
    <!-- Header Section -->
    <div class="p-3 font-mono text-sm flex justify-between items-center transition-all group-hover:bg-gray-800 group-hover:text-white">
      <span class="font-bold">Code Window</span>
      <button class="bg-blue-500 text-white px-2 py-1 rounded-md text-xs transition-all group-hover:bg-red-500">
        Execute
      </button>
    </div>

    <!-- Code Section -->
    <div class="p-5 transition-all">
      <pre class="text-sm font-mono">
<code class="group-hover:text-gray-300">
<span class="group-hover:text-teal-400">const</span> <span class="group-hover:text-purple-400">message</span> = <span class="group-hover:text-red-400">'Hello, World!'</span>;
<span class="group-hover:text-yellow-500">function</span> <span class="group-hover:text-blue-400">showMessage</span>() {
  <span class="group-hover:text-orange-500">console</span>.log(<span class="group-hover:text-pink-400">'Message: '</span> + message);
}
<span class="group-hover:text-teal-400">showMessage</span>();
</code>
      </pre>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="cursor-pointer flex justify-center items-center min-h-screen bg-gray-900">
    <div class="relative w-48 h-64 overflow-hidden rounded-xl bg-gradient-to-br from-indigo-800 via-purple-600 to-pink-600 transform transition-all hover:scale-105 hover:shadow-2xl">
        <!-- Central Text -->
        <div class="absolute flex items-center justify-center text-white font-extrabold text-xl z-[1] opacity-90 rounded-xl inset-0.5 bg-gradient-to-br from-gray-800 via-gray-700 to-gray-900 shadow-lg">
            FUN CARD
        </div>

        <!-- Background Glowing Effect -->
        <div class="absolute w-56 h-48 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 blur-[50px] -left-1/3 -top-1/3 animate-pulse"></div>

        <!-- Outer Glow / Reflection Effect -->
        <div class="absolute w-full h-full bg-gradient-to-br from-transparent via-transparent to-transparent opacity-20 blur-[80px] -top-1/3 -left-1/3 animate-pulse"></div>
    </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="cursor-pointer relative flex justify-center items-center h-screen bg-gray-900">
  <div class="w-64 h-80 bg-black rounded-xl shadow-lg p-6 text-white flex flex-col justify-between transition-all duration-300 transform hover:scale-110 hover:shadow-2xl hover:translate-y-2 hover:rotate-3">
      <div class="text-center">
          <h2 id='vibrant-neon-card'  id="boomdevs_34" class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-600 to-yellow-500" >Vibrant Neon Card</h2>
          <p class="mt-4 text-lg">Hover over the card to experience the vibrant glow and interactive depth effect!</p>
      </div>
      <button class="mt-8 py-2 px-6 bg-gradient-to-r from-pink-600 to-yellow-500 rounded-lg text-white font-semibold shadow-xl hover:bg-gradient-to-l hover:from-yellow-500 hover:to-pink-600 transition duration-300 transform hover:scale-105">
          Explore
      </button>
      <div class="absolute top-0 left-0 right-0 bottom-0 rounded-xl border-4 border-dashed border-transparent bg-gradient-to-br from-pink-600 to-yellow-500 opacity-60 blur-2xl"></div>
  </div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="max-w-xs rounded-lg overflow-hidden shadow-md bg-white transition-transform transform hover:scale-105 hover:shadow-lg">
      <img decoding="async" class="w-full h-48 object-cover" src="https://images.nightcafe.studio/jobs/7lq9J5lNfuSgyIqZVI6h/7lq9J5lNfuSgyIqZVI6h--0--u8ndv.jpg?tr=w-1600,c-at_max" alt="Blog Image">
      <div class="p-4">
          <h3 id='the-ultimate-guide-to-web-development'  id="boomdevs_37" class="text-xl font-semibold text-gray-900 hover:text-blue-600 transition-colors duration-300" >The Ultimate Guide to Web Development</h3>
          <p class="mt-2 text-gray-600 text-xs">In this blog post, we explore the best practices for web development, covering everything from HTML to advanced JavaScript concepts.</p>
          <div class="flex justify-between items-center mt-4">
              <span class="text-xs text-gray-500">Jan 7, 2025</span>
              <button class="py-1 px-3 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition duration-300">Read More</button>
          </div>
      </div>
  </div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="max-w-xs w-full">
    <div class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-purple-600 to-indigo-700 shadow-xl hover:shadow-2xl transition-all transform hover:scale-105 duration-300">
      <!-- Dark overlay effect -->
      <div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-40 transition-all"></div>

      <!-- Content area with padding and flexbox to control layout -->
      <div class="relative z-10 p-8 flex flex-col justify-between h-full">
        <div>
          <div class="flex items-center justify-center w-20 h-20 mb-6 bg-white rounded-full shadow-xl transform group-hover:scale-110 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 0v4m0-4H8m4 0h4" />
            </svg>
          </div>
          <h3 id='creative-card-title'  id="boomdevs_40" class="text-3xl font-semibold text-white" >Creative Card Title</h3>
          <p class="mt-3 text-sm text-white opacity-80">This is a description of the card. It has a unique concept with hover effects, gradients, and scale effects to make it stand out more.</p>
        </div>

        <!-- Action button at the bottom with padding -->
        <div class="mt-auto">
          <button class="w-full py-3 text-white font-semibold bg-purple-700 rounded-xl hover:bg-purple-800 transition-all transform hover:scale-105 duration-300 shadow-md hover:shadow-xl">
            Action Button
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="max-w-xs w-full bg-white rounded-xl shadow-lg overflow-hidden transition-all transform hover:scale-105 hover:shadow-2xl duration-300">
    <div class="flex">
      <!-- Left side (image) -->
      <div class="w-1/2">
        <img decoding="async" src="https://images.nightcafe.studio/jobs/7lq9J5lNfuSgyIqZVI6h/7lq9J5lNfuSgyIqZVI6h--0--u8ndv.jpg?tr=w-1600,c-at_max" alt="Image" class="w-full h-full object-cover transition-all duration-500 group-hover:opacity-80">
      </div>

      <!-- Right side (content) -->
      <div class="w-1/2 p-6 flex flex-col justify-between">
        <h3 id='modern-card-title'  id="boomdevs_43" class="text-2xl font-semibold text-gray-800" >Modern Card Title</h3>
        <p class="mt-3 text-sm text-gray-600 opacity-80">This is a creative card.</p>
        
        <!-- Action Button -->
        <div class="mt-auto">
          <button class="w-full py-3 text-white font-semibold bg-purple-600 rounded-xl hover:bg-purple-700 transition-all duration-300 shadow-md hover:shadow-xl mt-4">
  Learn More
</button>

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

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-800">
  <div
    class="relative drop-shadow-2xl w-48 h-64 overflow-hidden rounded-xl bg-black border border-indigo-500"
  >
    <div
      class="absolute flex items-center justify-center text-indigo-400 font-extrabold text-lg z-[1] opacity-90 rounded-xl inset-0.5 bg-gray-900 hover:bg-gray-800 transition-all duration-300"
    >
    </div>
    <div class="absolute w-64 h-64 bg-gradient-to-t from-indigo-400 via-purple-500 to-pink-500 blur-[60px] -right-1/4 -bottom-1/4"></div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div
    class="relative drop-shadow-lg w-48 h-64 overflow-hidden rounded-xl bg-gradient-to-br from-gray-800 to-gray-900"
  >
    <!-- Gradient Background (Behind Content) -->
    <div
      class="absolute w-64 h-64 bg-gradient-to-t from-indigo-400 via-pink-500 to-purple-500 blur-[70px] -right-1/4 -top-1/4 z-0"
    ></div>

    <!-- Card Content (Above Gradient) -->
    <div
      class="absolute inset-0.5 bg-white bg-opacity-10 backdrop-blur-lg rounded-xl flex flex-col justify-between p-4 z-10 transition-all duration-300 hover:scale-105 hover:backdrop-blur-3xl"
    >
      <h3 id='glass-card'  id="boomdevs_48" class="text-white text-lg font-semibold" >Glass Card</h3>
      <p class="text-gray-300 text-sm mt-2">
        Experience the stunning glass morphism effect.
      </p>
      <button
        class="py-1 px-4 mt-4 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 text-white text-sm rounded-md hover:shadow-lg hover:from-purple-600 hover:to-pink-600 transition-all"
      >
        Learn More
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-800">
  <div
    class="relative drop-shadow-2xl w-48 h-64 overflow-hidden rounded-xl bg-gradient-to-r from-gray-900 via-gray-800 to-black"
  >
    <!-- Layered Glow (Behind Content) -->
    <div
      class="absolute w-64 h-64 bg-gradient-to-t from-indigo-600 to-pink-500 blur-[80px] opacity-50 z-0"
    ></div>

    <!-- Card Content -->
    <div
      class="absolute inset-0 bg-gray-900 text-gray-300 rounded-xl p-4 flex flex-col justify-between z-10 transform transition-transform hover:-translate-y-1"
    >
      <h3 id='layered-design'  id="boomdevs_51" class="text-lg font-semibold" >Layered Design</h3>
      <p class="text-sm text-gray-400 mt-2">
        A minimalistic card with layered hover animations.
      </p>
      <button
        class="py-1 px-4 mt-4 bg-gray-700 text-white text-sm rounded-md hover:bg-gray-600 hover:text-indigo-400 transition-all z-20"
      >
        Explore
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div
    class="relative w-48 h-64 bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:rotate-1"
  >
    <!-- Diagonal Overlay -->
    <div
      class="absolute inset-0 bg-gray-900 bg-opacity-40 clip-diagonal z-10"
    ></div>

    <!-- Card Content -->
    <div class="relative z-20 p-4">
      <h3 id='diagonal-split'  id="boomdevs_54" class="text-lg font-semibold" >Diagonal Split</h3>
      <p class="text-sm text-gray-200 mt-2">
        Unique diagonal overlay with gradient background.
      </p>
      <button
        class="py-1 px-3 mt-4 bg-gray-800 hover:bg-pink-500 text-sm rounded-md transition-all"
      >
        Learn More
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Diagonal Clipping */
  .clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-200">
  <div
    class="relative w-48 h-64 bg-gradient-to-b from-green-400 to-teal-500 text-white rounded-lg shadow-lg overflow-hidden transform transition-all hover:rotate-3 hover:scale-105"
  >
    <!-- Circular Overlay -->
    <div
      class="absolute w-48 h-48 bg-gradient-to-r from-yellow-500 via-red-500 to-purple-500 rounded-full blur-2xl opacity-20 -top-12 -left-12 hover:opacity-40 transition-all"
    ></div>

    <!-- Content -->
    <div class="relative z-10 h-full p-4 flex flex-col justify-between">
      <h3 id='circular-overlay'  id="boomdevs_57" class="text-lg font-bold" >Circular Overlay</h3>
      <p class="text-sm mt-2">
        A vibrant card with a glowing circular background effect.
      </p>
      <button
        class="py-1 px-3 mt-4 bg-teal-600 hover:bg-teal-700 text-white text-sm rounded-md transition-all"
      >
        Learn More
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-64 h-90 bg-white dark:bg-gray-900 p-6 shadow-xl rounded-lg relative overflow-hidden group">
    <div class="absolute inset-0 bg-pattern opacity-30"></div>
    <div class="relative z-10">
      <h3 id='geometric-design-card'  id="boomdevs_60" class="text-xl font-semibold text-gray-800 dark:text-white" >Geometric Design Card</h3>
      
      <div class="mt-4">
        <a href="#" class="text-blue-500 hover:underline">Learn More</a>
        <span class="ml-2 text-gray-600 dark:text-gray-400">|</span>
        <a href="#" class="text-blue-500 hover:underline">Contact Us</a>
      </div>
      <div class="mt-6">
        <img decoding="async" src="https://images.nightcafe.studio/jobs/q6KJnEsx177dfYsLA0Ga/q6KJnEsx177dfYsLA0Ga--0--d8254.jpg?tr=w-1600,c-at_max/150x50" alt="Image 1" class="w-full rounded-lg object-cover">
      </div>
      <button class="w-full py-2 mt-4 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg transform transition-all hover:bg-gradient-to-r hover:from-blue-600 hover:to-teal-600">
        Get Started
      </button>
    </div>
  </div>
</div>

<!-- Custom geometric gradient pattern -->
<style>
  .bg-pattern {
    background: repeating-linear-gradient(45deg, #3490dc 0px, #3490dc 10px, #38b2ac 10px, #38b2ac 20px);
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-64 h-90 bg-white dark:bg-gray-900 p-6 shadow-xl rounded-lg relative overflow-hidden group">
    <div class="absolute inset-0 bg-pattern opacity-30"></div>
    <div class="relative z-10">
      <h3 id='geometric-design-card-1'  id="boomdevs_63" class="text-xl font-semibold text-gray-800 dark:text-white" >Geometric Design Card</h3>
      
      <div class="mt-4">
        <a href="#" class="text-blue-500 hover:underline">Learn More</a>
        <span class="ml-2 text-gray-600 dark:text-gray-400">|</span>
        <a href="#" class="text-blue-500 hover:underline">Contact Us</a>
      </div>
      <div class="mt-6">
        <img decoding="async" src="https://images.nightcafe.studio/jobs/q6KJnEsx177dfYsLA0Ga/q6KJnEsx177dfYsLA0Ga--0--d8254.jpg?tr=w-1600,c-at_max/150x50" alt="Image 1" class="w-full rounded-lg object-cover">
      </div>
      <button class="w-full py-2 mt-4 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg transform transition-all hover:bg-gradient-to-r hover:from-blue-600 hover:to-teal-600">
        Get Started
      </button>
    </div>
  </div>
</div>

<!-- Custom geometric gradient pattern -->
<style>
  .bg-pattern {
    background: repeating-linear-gradient(45deg, #3490dc 0px, #3490dc 10px, #38b2ac 10px, #38b2ac 20px);
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="bg-gray-800 w-72 h-80 rounded-xl shadow-2xl hover:shadow-2xl hover:border-4 hover:border-neon-pink transition-all duration-300 p-6">
      <!-- Neon Border & Glowing Effect -->
      <div class="relative p-6 bg-gray-800 rounded-xl shadow-lg group hover:bg-gray-700 transition-all duration-300">
          <!-- Neon Dots -->
          <div class="flex justify-center gap-4 mb-6">
              <div class="bg-blue-500 w-4 h-4 rounded-full shadow-lg group-hover:shadow-blue-500 transition-all"></div>
              <div class="bg-purple-500 w-4 h-4 rounded-full shadow-lg group-hover:shadow-purple-500 transition-all"></div>
              <div class="bg-pink-500 w-4 h-4 rounded-full shadow-lg group-hover:shadow-pink-500 transition-all"></div>
          </div>

          <!-- Card Content -->
          <h3 id='neon-card-title'  id="boomdevs_66" class="text-2xl font-bold text-white mb-4" >Neon Card Title</h3>
          <p class="text-sm text-gray-300 mb-6">This card features a glowing neon effect and social media links with rotating cubes as icons.</p>

          <!-- Social Media Icons (Rotating Cubes) -->
          <div class="flex justify-center gap-6">
              <a href="https://facebook.com" target="_blank" class="transform 3d-cube hover:scale-110 hover:bg-blue-500 transition-all duration-500 p-2" rel="noopener">
                  <img decoding="async" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/facebook.svg" alt="Facebook" class="w-6 h-6" />
              </a>
              <a href="https://twitter.com" target="_blank" class="transform 3d-cube hover:scale-110 hover:bg-blue-400 transition-all duration-500 p-2" rel="noopener">
                  <img decoding="async" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/twitter.svg" alt="Twitter" class="w-6 h-6" />
              </a>
              <a href="https://instagram.com" target="_blank" class="transform 3d-cube hover:scale-110 hover:bg-pink-500 transition-all duration-500 p-2" rel="noopener">
                  <img decoding="async" src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/instagram.svg" alt="Instagram" class="w-6 h-6" />
              </a>
          </div>
      </div>
  </div>
</div>

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<!-- Custom CSS -->
<style>
  /* Adding the 3D rotation and hover effect to the icons */
  .transform.3d-cube {
      display: inline-block;
      perspective: 1000px;
  }

  .transform.3d-cube img {
      display: block;
      transition: transform 0.5s ease, background-color 0.3s ease;
      transform-style: preserve-3d;
      border-radius: 50%;
  }

  .transform.3d-cube:hover img {
      transform: rotateY(180deg);
      background-color: rgba(0, 0, 0, 0.1);
  }

  .transform.3d-cube:hover {
      transform: rotateY(360deg);
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <!-- Neon Card -->
  <div class="relative w-72 bg-gray-800 text-gray-300 rounded-lg shadow-lg p-6 overflow-hidden group">
      <!-- Animated Moving Border -->
      <div class="absolute inset-0 rounded-lg border-4 border-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 animate-moving-border"></div>
      <div class="absolute inset-1 bg-gray-900 rounded-lg"></div>

      <!-- Card Content -->
      <div class="relative z-10">
          <!-- Title -->
          <div class="text-xl font-bold text-white mb-3 uppercase tracking-wide">
              Neon Card Title
          </div>

          <!-- Description -->
          <p class="text-sm text-gray-400 mb-4">
              This card features a vibrant neon theme with a stunning moving border and hover effects for interactive buttons.
          </p>

          <!-- Buttons Section -->
          <div class="grid grid-cols-2 gap-4">
              <!-- Button 1 -->
              <button class="w-full bg-gradient-to-r from-purple-600 to-pink-500 text-white font-bold py-2 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class="inline-block">
                      <path d="M4.646 4.646a.5.5 0 011 0V9h4.5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5V4.646zM13.354 1.646a.5.5 0 010 .708L6.707 9l-.708-.708 6.647-6.647a.5.5 0 01.708 0z"></path>
                  </svg>
                  Explore
              </button>

              <!-- Button 2 -->
              <button class="w-full bg-gradient-to-r from-blue-600 to-teal-500 text-white font-bold py-2 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class="inline-block">
                      <path d="M7.5 1a.5.5 0 00-.5.5V4H2a1 1 0 00-1 1v5a1 1 0 001 1h4.5v3.5a.5.5 0 00.854.354l5-5a.5.5 0 000-.708l-5-5A.5.5 0 007.5 1z"></path>
                  </svg>
                  Visit
              </button>
          </div>
      </div>
  </div>
</div>

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<!-- Custom CSS for the Moving Border -->
<style>
  /* Moving Border Animation */
  .animate-moving-border {
      background-size: 300% 300%;
      animation: move-border 6s linear infinite;
  }

  @keyframes move-border {
      0% {
          background-position: 0% 50%;
      }

      50% {
          background-position: 100% 50%;
      }

      100% {
          background-position: 0% 50%;
      }
  }

  /* Layering to ensure the border is separate and visible */
  .absolute.inset-0 {
      z-index: 1;
  }

  .absolute.inset-1 {
      z-index: 2;
  }

  .relative.z-10 {
      z-index: 3;
  }
</style>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <!-- Neon Card -->
  <div class="relative w-80 h-96 bg-gray-800 rounded-xl overflow-hidden shadow-lg group">
    <!-- Glowing Outer Layer -->
    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-cyan-500 to-purple-500 opacity-40 blur-lg transition-all duration-300 group-hover:opacity-70 group-hover:blur-2xl pointer-events-none"></div>

    <!-- Inner Card -->
    <div class="absolute inset-1 bg-gradient-to-b from-gray-800 to-black rounded-xl shadow-md transition-all duration-300">
      <!-- Card Content -->
      <div class="relative z-10 h-full p-6 flex flex-col justify-between">
        <!-- Title & Description -->
        <div>
          <h2 id="boomdevs_71" class="text-2xl font-bold text-white tracking-wide uppercase">
            Futuristic Design
          </h2>
          <p class="mt-2 text-sm text-gray-400 leading-relaxed">
            An immersive 3D neon card with glowing effects, rotating icons, and smooth transitions.
          </p>
        </div>

        <!-- Rotating Neon Cubes -->
        <div class="flex justify-between items-center mt-6">
          <!-- Cube 1 -->
          <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-blue-500 to-teal-500 flex items-center justify-center shadow-lg transform transition-all duration-300 hover:scale-125 hover:rotate-45 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </div>

          <!-- Cube 2 -->
          <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center shadow-lg transform transition-all duration-300 hover:scale-125 hover:rotate-45 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </div>

          <!-- Cube 3 -->
          <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-pink-500 to-red-500 flex items-center justify-center shadow-lg transform transition-all duration-300 hover:scale-125 hover:rotate-45 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </div>
        </div>

        <!-- Button -->
        <button class="mt-6 w-full py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold rounded-lg shadow-md hover:shadow-lg hover:scale-105 transition-transform duration-300 cursor-pointer">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>

<!-- TailwindCSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <div class="w-64 h-80 bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-800 p-6 shadow-xl rounded-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
    <div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-30 transform rotate-45"></div>
    <div class="relative z-10">
      <h3 id='modern-stripes-card'  id="boomdevs_74" class="text-xl font-semibold text-white" >Modern Stripes Card</h3>
      <p class="text-sm text-white mt-2">A card with diagonal stripes for a sleek look.</p>
      <div class="mt-4">
        <div class="flex items-center gap-2">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.5V21H10v-1.5l4-4V15.5z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7.5V11H10v-1.5l4-4V7.5z" />
          </svg>
          <span class="text-sm">12 Reviews</span>
        </div>
        <div class="flex items-center gap-2 mt-2">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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>
          <span class="text-sm">4.5/5</span>
      </div>
      <div class="flex items-center gap-2 mt-2">
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="text-sm">Free Delivery</span>
      </div>
      <div class="flex items-center gap-2 mt-2">
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 
01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
        </svg>
        <span class="text-sm">Return Policy</span>
      </div>
      <button class="w-full py-2 mt-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-lg transform transition-all hover:bg-indigo-600 hover:scale-105">
        Explore
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="w-64 h-90 bg-white text-gray-800 shadow-xl rounded-lg overflow-hidden group">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/HJV6SCu4Q2taUSqcUmrK/HJV6SCu4Q2taUSqcUmrK--1--2cesm.jpg?tr=w-1600,c-at_max/300x200" alt="Blog Image" class="w-full h-40 object-cover">
    <div class="p-4">
      <h3 id='amazing-blog-post'  id="boomdevs_77" class="text-xl font-semibold" >Amazing Blog Post</h3>
      <p class="text-sm text-gray-600 mt-2">A brief overview of the blog post content. This card gives a glimpse of the post.</p>
      <button class="w-full py-2 mt-4 bg-blue-500 text-white rounded-lg transform transition-all hover:bg-blue-600">
        Read More
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="w-64 bg-white text-gray-800 shadow-xl rounded-lg overflow-hidden group">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/TUSj3kxsxGifvmvqxp3J/TUSj3kxsxGifvmvqxp3J--0--2hzmy.jpg?tr=w-1600,c-at_max/150" alt="Profile Image" class="w-32 h-32 rounded-full mx-auto mt-4">
    <div class="p-4 text-center">
      <h3 id='john-doe'  id="boomdevs_80" class="text-xl font-semibold" >John Doe</h3>
      <p class="text-sm text-gray-500">Web Developer</p>
      <div class="mt-3">
        <a href="#" class="text-blue-500">Follow on Twitter</a>
      </div>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen max-w-[15rem] max-h-[18rem] mx-auto p-4">
    <div class="bg-purple-100 rounded-lg shadow-lg overflow-hidden transition-all transform hover:scale-105 hover:shadow-2xl">
      <div class="bg-purple-800 text-white p-3 font-mono text-sm flex justify-between items-center cursor-pointer hover:bg-purple-700">
        <span class="font-bold">Code Window (Purple Theme)</span>
        <div class="flex space-x-2">
          <button class="bg-purple-500 text-white px-2 py-1 rounded-md text-xs">Play</button>
          <button class="bg-purple-700 text-white px-2 py-1 rounded-md text-xs">Stop</button>
        </div>
      </div>
      <div class="p-5">
        <pre class="text-sm font-mono text-purple-900">
  <code>
  <span class="text-pink-500">let</span> <span class="text-cyan-500">user</span> = <span class="text-red-500">'Alice'</span>;
  <span class="text-teal-500">console</span>.log(<span class="text-yellow-500">'Hello, '</span> + user);
  </code>
        </pre>
      </div>
    </div>
  </div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="w-64 h-80 bg-green-200 text-gray-800 shadow-xl rounded-lg overflow-hidden group">
    <div class="p-6">
      <h3 id='you-re-invited'  id="boomdevs_85" class="text-xl font-semibold text-green-800" >You're Invited!</h3>
      <p class="text-sm text-gray-600 mt-2">Join us for a celebration of life and joy!</p>
      <p class="text-xs text-gray-500 mt-2">Date: 12th December 2024</p>
      <p class="text-xs text-gray-500">Time: 5:00 PM</p>
      <p class="text-xs text-gray-500">Location: 123 Main St, Anytown USA</p>
      <div class="mt-6 flex items-center gap-2">
        <input type="checkbox" id="remember-me" class="form-checkbox h-4 w-4 text-green-600" />
        <label for="remember-me" class="text-sm text-gray-600">Remember Me</label>
      </div>
      <div class="mt-6">
        <p class="text-xs text-gray-500">By clicking RSVP Now, you agree to our <a href="#" class="text-green-600 underline">Terms & Conditions</a></p>
      </div>
      <button class="w-full py-2 mt-4 bg-green-500 text-white rounded-lg transform transition-all hover:bg-green-600">
        RSVP Now
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="w-64 h-90 bg-yellow-200 text-gray-800 shadow-xl rounded-lg overflow-hidden group">
    <div class="p-6 text-center">
      <!-- Cake Icon -->
      <svg class="w-24 h-24 mx-auto text-yellow-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2C10.895 2 10 2.895 10 4C10 5.105 10.895 6 12 6C13.105 6 14 5.105 14 4C14 2.895 13.105 2 12 2zM9 9C9 9.553 9.447 10 10 10H14C14.553 10 15 9.553 15 9V7C15 6.447 14.553 6 14 6H10C9.447 6 9 6.447 9 7V9zM12 22C10.895 22 10 21.105 10 20C10 18.895 10.895 18 12 18C13.105 18 14 18.895 14 20C14 21.105 13.105 22 12 22zM5 14C5 13.447 5.447 13 6 13H18C18.553 13 19 13.447 19 14V16C19 16.553 18.553 17 18 17H6C5.447 17 5 16.553 5 16V14z" />
      </svg>
      
      <!-- Birthday Greeting -->
      <h3 id='happy-birthday'  id="boomdevs_88" class="text-2xl font-semibold text-yellow-800" >Happy Birthday!</h3>
      <p class="text-lg mt-4">Wishing you a wonderful day, <span class="font-bold text-yellow-600">John!</span></p>
      <p class="text-sm text-yellow-700 mt-2">May all your wishes come true!</p>
      
      <!-- Celebrate Button -->
      <button class="w-full py-2 mt-4 bg-yellow-600 text-white rounded-lg transform transition-all hover:bg-yellow-700">
        Celebrate Now
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="group relative w-30 h-60 bg-teal-500 shadow-lg rounded-3xl flex justify-center items-center min-h-screen">
  <div class="w-56 h-56 bg-gray-900 shadow-lg rounded-3xl flex justify-center items-center">
    <div class="flex flex-col items-center justify-center rounded-2xl bg-gray-900 shadow-inner shadow-gray-50 w-52 h-52">
      <!-- Hover effect container -->
      <div class="group-hover:duration-300 hover:opacity-100 opacity-0 relative flex flex-col justify-around items-center w-44 h-40 bg-gray-800 text-white">
        <!-- Date & Time -->
        <span class="text-lg font-semibold text-yellow-400">Sun, Jan 25</span>
        <span class="z-10 flex items-center text-6xl text-rose-600 [text-shadow:_2px_2px_#fff,_1px_2px_#fff]">
          2<span class="text-xl font-bold text-white [text-shadow:none]">:</span>35
        </span>
        <!-- Social Interaction Icons -->
        <div class="text-white w-48 flex flex-row justify-evenly">
          <span class="text-xs font-bold">99</span>
          <div class="flex flex-row items-center space-x-2">
            <!-- Heart SVG -->
            <svg class="w-5 h-5 fill-red-600 animate-bounce" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <path d="M23,27.6a15.8,15.8,0,0,1,22.4,0L50,32.2l4.6-4.6A15.8,15.8,0,0,1,77,50L50,77,23,50A15.8,15.8,0,0,1,23,27.6Z" fill-rule="evenodd"></path>
            </svg>
            <!-- Comment SVG -->
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <path d="M80.2,40.7l-1.1-2-.2-.3.3-.3c2.2-14.7-21.3-25.6-20.7-21S57,38.1,45.4,31.8c-9.3-5.1-12.9,12.1-22.8,33.7C16.2,79.4,20.8,82.3,27,81l.3.4L29,83.3a1.4,1.4,0,0,0,1.8.5l.9-.3a1.6,1.6,0,0,0,1.1-1.9l-.5-2.5a38.2,38.2,0,0,0,4.5-2.7L38.6,78a1.8,1.8,0,0,0,2.4-.1l1.2-1.1a1.9,1.9,0,0,0,.4-1.9l-1-2.5L45.5,69l1.7,1.6a1.8,1.8,0,0,0,2.4-.1l.9-1a1.7,1.7,0,0,0,.4-1.8L50,65c5.6-5,11.9-10.9,17.3-15.8l.4.2,1.9,1.1a1.6,1.6,0,0,0,2.1-.2l.8-.8a1.6,1.6,0,0,0,.3-2.1l-1.3-2.1,3.2-3.1,2.2,1.5a1.8,1.8,0,0,0,2.2-.1l.8-.8A1.7,1.7,0,0,0,80.2,40.7Z"></path>
            </svg>
            <!-- Share SVG -->
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <path d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z" fill-rule="evenodd"></path>
            </svg>
          </div>
        </div>
      </div>
      <!-- Product Name -->
      <span class="text-gray-100 text-lg font-light">WebDevTales</span>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="relative w-72 h-80 bg-gray-800 shadow-lg rounded-lg overflow-hidden p-6 group">
    <div class="absolute inset-0 border-4 border-dashed border-neon-blue opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
    <div class="relative z-10 text-white text-center">
      <h3 id='neon-pulse-card'  id="boomdevs_93" class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 mb-6" >Neon Pulse Card</h3>
      <p class="text-lg font-medium">A futuristic touch with glowing effects and interactive icons.</p>
      <div class="flex justify-center mt-8 space-x-6">
        <svg class="w-10 h-10 text-pink-500 group-hover:animate-pulse transition duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentColor" d="M50,10A40,40,0,1,0,90,50,40.5,40.5,0,0,0,50,10ZM50,70A20,20,0,1,1,70,50,20.2,20.2,0,0,1,50,70Z"/></svg>
        <svg class="w-10 h-10 text-yellow-500 group-hover:animate-pulse transition duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentColor" d="M50,10A40,40,0,1,0,90,50,40.5,40.5,0,0,0,50,10ZM50,70A20,20,0,1,1,70,50,20.2,20.2,0,0,1,50,70Z"/></svg>
      </div>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">

<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="relative w-72 h-80 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl overflow-hidden">
    <!-- Waves Pattern Background -->
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2025%22%3E%3Cpath%20d%3D%22M0%2C13c10%2C0%2010-13%2020-13s10%2C13%2020%2C13s10%2C13%2020%2C13H0Z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E')] bg-repeat bg-center"></div>

    <!-- Card Content -->
    <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center text-white">
      <h3 id='smooth-card'  id="boomdevs_96" class="text-2xl font-semibold mb-4" >Smooth Card</h3>
      <p class="text-lg">A smooth, flowing  pattern creates a relaxed, calming design.</p>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!




    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      rel="stylesheet"/>
 
  <body class="bg-gray-900 flex items-center justify-center min-h-screen">
    <div class="relative w-80 bg-gray-800 rounded-3xl shadow-xl overflow-hidden">
      <!-- Product Image -->
      <div class="relative group">
        <img decoding="async"
          alt="Product image"
          class="w-full h-56 object-cover rounded-t-3xl"
          src="https://images.nightcafe.studio/jobs/sQp8a38OW3dPViRuHFur/sQp8a38OW3dPViRuHFur--1--59wkp.jpg?tr=w-1600,c-at_max"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-black opacity-40 group-hover:opacity-80 transition-opacity duration-300"></div>
        <div class="absolute bottom-6 left-6 text-white z-10">
          <h2 id='lorem-ipsum'  id="boomdevs_99" class="text-2xl font-bold" >Lorem ipsum</h2>
          <p class="text-sm">Product description goes here</p>
        </div>
      </div>
      
      <!-- Product Details -->
      <div class="p-6 bg-gray-900 rounded-b-3xl">
        <div class="flex justify-between items-center mb-4">
          <span class="text-gray-500">SIZE</span>
          <div class="flex items-center space-x-2">
            <span class="text-gray-500">S</span>
            <span class="text-gray-500">M</span>
            <span class="text-gray-500">L</span>
            <span class="text-gray-500">XL</span>
          </div>
        </div>

        <!-- Price and Button -->
        <div class="flex justify-between items-center mb-4">
          <span class="text-2xl font-semibold text-gray-100">$15.00</span>
          <button class="bg-orange-500 text-white px-6 py-2 rounded-full hover:bg-orange-600 transition duration-300">
            Add to Cart
          </button>
        </div>

        <!-- Interaction Icons -->
        <div class="flex justify-between items-center text-gray-500">
          <i class="fas fa-heart hover:text-red-500 cursor-pointer transition duration-300"></i>
          <i class="fas fa-chevron-right hover:text-blue-500 cursor-pointer transition duration-300"></i>
        </div>
      </div>
    </div>
  </body>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<div class="flex justify-center items-center min-h-screen bg-gray-900">
  <div class="w-[14rem] h-[18rem] bg-gray-800 text-white shadow-xl rounded-lg overflow-hidden p-6 transform transition-all hover:bg-gradient-to-r hover:from-teal-400 hover:to-blue-500 group">
    <div class="text-center">
      <h3 id='amazing-projects'  id="boomdevs_102" class="text-xl font-medium text-gray-300 group-hover:text-white transition-all" >Amazing Projects</h3>
      <p class="text-sm text-gray-400 mt-2 group-hover:text-gray-100 transition-all">Click to view creative projects and ideas.</p>
    </div>
    <div class="mt-4">
      <button class="w-full py-2 bg-teal-500 text-white rounded-full transform transition-all hover:bg-teal-600 group-hover:scale-105">
        View Projects
      </button>
    </div>
  </div>
</div>

<!-- No CSS code needed for this element -->

<!-- No JS code needed for this element -->

36 TailwindCSS Cards

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code