TailwindCSS Cards - WebDevTales

60 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 class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7118892695153021"
     crossorigin="anonymous"></script>
<!-- pages -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7118892695153021"
     data-ad-slot="7904551924"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

      </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 -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="w-[18rem] bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow duration-300">
      <img decoding="async" class="w-full h-42 object-cover hover:scale-105 transition-transform duration-300" 
           src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&auto=format&fit=crop&w=1679&q=80" 
           alt="Blog cover">
      <div class="p-4">
          <div class="flex items-center mb-2">
              <span class="bg-indigo-500 text-white text-xs px-2 py-1 rounded-full">Tech</span>
          </div>
          <h2 id="boomdevs_105" class="text-xl font-bold mb-1 hover:text-indigo-600 transition-colors duration-300">
              Web Dev Trends
          </h2>
          <p class="text-gray-600 text-sm">Latest trends shaping the future of web development.</p>
          <div class="mt-3 flex items-center">
              <img decoding="async" class="w-8 h-8 rounded-full mr-2" 
                   src="https://randomuser.me/api/portraits/men/1.jpg" 
                   alt="Author">
              <div>
                  <p class="text-gray-900 font-semibold text-sm">John Doe</p>
                  <p class="text-gray-500 text-xs">Aug 18 · 5 min read</p>
              </div>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg p-4 max-w-xs w-full shadow-lg">
      <div class="flex items-start">
          <svg class="h-6 w-6 text-white mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <div class="text-white">
              <h3 id='system-alert'  id="boomdevs_108" class="text-lg font-bold mb-1" >System Alert</h3>
              <p class="text-sm opacity-90">Maintenance on Aug 25, 12 AM - 4 AM UTC. Some services may be unavailable.</p>
              <button class="mt-3 bg-white text-purple-600 px-3 py-1.5 rounded-md text-sm font-semibold hover:bg-opacity-90 transition-opacity duration-200">
                  View Details
              </button>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center overflow-hidden">
  <div class="bg-white rounded-2xl shadow-2xl p-8 max-w-xs w-full transform hover:scale-105 transition-transform duration-300">
      <div class="flex flex-col items-center">
          <img decoding="async" class="w-32 h-32 rounded-full border-4 border-indigo-500 mb-4" 
               src="https://images.nightcafe.studio/jobs/K4JwQwnFczCZrDfkNQLY/K4JwQwnFczCZrDfkNQLY--0--ibmcu.jpg?tr=w-1600,c-at_max" 
               alt="Profile">
          <h2 id='nik-johnson'  id="boomdevs_111" class="text-2xl font-bold text-gray-800" >Nik Johnson</h2>
          <p class="text-gray-500 mb-4"> UX Designer</p>
          <div class="w-full border-t border-gray-200 mb-6"></div>
          <div class="space-y-3 w-full">
              <div class="flex items-center text-gray-600">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                  </svg>
                  sarah@example.com
              </div>
              <div class="flex items-center text-gray-600">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                  </svg>
                  +1 (555) 123-4567
              </div>
          </div>
          <div class="flex space-x-4 mt-6">
              <button class="p-2 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors duration-200">
                  <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                  </svg>
              </button>
              <button class="p-2 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors duration-200">
                  <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z"/>
                  </svg>
              </button>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs hover:shadow-xl transition-shadow duration-300">
      <div class="relative">
          <img decoding="async" class="h-48 w-full object-cover" 
               src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" 
               alt="Product">
          <span class="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 text-sm rounded-full">
              25% OFF
          </span>
      </div>
      <div class="p-5">
          <h3 id='wireless-headphones'  id="boomdevs_114" class="text-xl font-bold text-gray-800 mb-2" >Wireless Headphones</h3>
          <div class="flex items-center mb-3">
              <div class="flex text-yellow-400">
                  ★★★★★
              </div>
              <span class="text-gray-600 ml-2">(128 reviews)</span>
          </div>
          <div class="flex items-center justify-between">
              <span class="text-2xl font-bold text-gray-800">$199.99</span>
              <del class="text-gray-500">$249.99</del>
          </div>
          <button class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200 flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
              </svg>
              Add to Cart
          </button>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center overflow-hidden">
  <div class="bg-white rounded-xl shadow-lg p-6 max-w-sm w-full transform hover:scale-[1.02] transition-transform duration-300">
      <div class="flex items-center justify-between mb-6">
          <h2 id='website-analytics'  id="boomdevs_117" class="text-2xl font-bold text-gray-800" >Website Analytics</h2>
          <svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
      </div>
      <div class="space-y-4">
          <div class="flex justify-between items-center">
              <span class="text-gray-600">Total Visitors</span>
              <span class="font-bold text-gray-800">24.5K</span>
          </div>
          <div class="flex justify-between items-center">
              <span class="text-gray-600">Avg. Time</span>
              <span class="font-bold text-gray-800">2m 46s</span>
          </div>
          <div class="flex justify-between items-center">
              <span class="text-gray-600">Bounce Rate</span>
              <span class="font-bold text-red-500">34%</span>
          </div>
          <div class="flex justify-between items-center">
              <span class="text-gray-600">Conversions</span>
              <span class="font-bold text-green-500">18%</span>
          </div>
      </div>
      <div class="mt-6 bg-gray-100 p-3 rounded-lg">
          <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">Today's Visitors:</span>
              <span class="font-bold text-indigo-600">1,234</span>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-lg p-6 max-w-[18rem] w-full transform hover:-translate-y-2 transition-all duration-300">
      <div class="text-center mb-6">
          <span class="bg-purple-100 text-purple-800 px-4 py-1 rounded-full text-sm font-medium">Most Popular</span>
          <h3 id='pro-plan'  id="boomdevs_120" class="text-2xl font-bold mt-4" >Pro Plan</h3>
          <div class="my-4">
              <span class="text-4xl font-bold">$29</span>
              <span class="text-gray-500">/month</span>
          </div>
      </div>
      <ul class="space-y-3 mb-6">
          <li class="flex items-center text-gray-600">
              <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              10 Projects
          </li>
          <li class="flex items-center text-gray-600">
              <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              5GB Storage
          </li>
          <li class="flex items-center text-gray-600">
              <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              Premium Support
          </li>
      </ul>
      <button class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors">
          Get Started
      </button>
  </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-md p-6 max-w-[18rem] hover:shadow-lg transition-shadow duration-300">
      <div class="flex items-center mb-4">
          <img decoding="async" class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User">
          <div>
              <h4 id='michael-chen'  id="boomdevs_123" class="font-semibold" >Michael Chen</h4>
              <p class="text-sm text-gray-500">CTO @TechCo</p>
          </div>
      </div>
      <div class="mb-4">
          <div class="flex text-yellow-400 mb-2">
              ★★★★★
          </div>
          <p class="text-gray-600 text-sm italic">"This service transformed our workflow. The support team is exceptional and the platform is incredibly intuitive."</p>
      </div>
      <div class="border-t pt-4">
          <p class="text-xs text-gray-500">Posted 2 days ago</p>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-xl p-6 max-w-[18rem] w-full shadow-xl">
      <div class="flex justify-between items-center mb-6">
          <div>
              <h2 id='new-york'  id="boomdevs_126" class="text-2xl font-bold" >New York</h2>
              <p class="opacity-90">Partly Cloudy</p>
          </div>
          <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
          </svg>
      </div>
      <div class="text-4xl font-bold mb-6">23°C</div>
      <div class="space-y-3">
          <div class="flex justify-between text-sm">
              <span>Humidity</span>
              <span>68%</span>
          </div>
          <div class="flex justify-between text-sm">
              <span>Wind</span>
              <span>12 km/h</span>
          </div>
          <div class="flex justify-between text-sm">
              <span>Precip</span>
              <span>10%</span>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-lg p-6 max-w-[18rem] w-full">
      <div class="relative group">
          <img decoding="async" class="w-full rounded-lg mb-4 transform group-hover:scale-95 transition-transform duration-300" 
               src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" 
               alt="Album Cover">
          <button class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
              <svg class="w-8 h-8 text-black" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z"/>
              </svg>
          </button>
      </div>
      <div class="mb-4">
          <h3 id='midnight-jazz'  id="boomdevs_129" class="font-bold text-lg" >Midnight Jazz</h3>
          <p class="text-gray-600 text-sm">Smooth Jazz Ensemble</p>
      </div>
      <div class="flex items-center justify-between text-sm">
          <span class="text-gray-500">2:45</span>
          <div class="flex items-center space-x-4">
              <button class="text-gray-600 hover:text-black">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                  </svg>
              </button>
              <button class="bg-black text-white p-2 rounded-full hover:bg-gray-800">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 12M6 6l12 6"/>
                  </svg>
              </button>
              <button class="text-gray-600 hover:text-black">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                  </svg>
              </button>
          </div>
          <span class="text-gray-500">3:30</span>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-[18rem] hover:shadow-lg transition-shadow">
      <div class="relative">
          <img decoding="async" class="h-40 w-full object-cover" src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7" alt="Event">
          <div class="absolute top-2 right-2 bg-white/90 px-3 py-1 rounded-full text-sm font-medium">
              Aug 24, 2023
          </div>
      </div>
      <div class="p-4">
          <h3 id='tech-conference-2023'  id="boomdevs_132" class="font-bold text-lg mb-2" >Tech Conference 2023</h3>
          <div class="flex items-center text-gray-600 mb-3">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              <span class="text-sm">Convention Center, NYC</span>
          </div>
          <div class="flex justify-between items-center">
              <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Free Entry</span>
              <button class="bg-black text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-800 transition-colors">
                  Register Now
              </button>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl p-5 max-w-[18rem] relative overflow-hidden group">
      <div class="relative z-10">
          <div class="flex justify-between items-start mb-4">
              <h3 id='cyber-hunt-2077'  id="boomdevs_135" class="text-xl font-bold text-white" >Cyber Hunt 2077</h3>
              <span class="bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-md text-sm">Live</span>
          </div>
          <div class="relative h-40 rounded-xl overflow-hidden mb-4">
              <img decoding="async" src="https://images.unsplash.com/photo-1589254065878-42c9da997008" 
                   class="w-full h-full object-cover group-hover:scale-105 transition-transform">
              <div class="absolute inset-0 bg-gradient-to-t from-zinc-900/80 via-transparent"></div>
              <button class="absolute bottom-2 left-2 bg-white/10 backdrop-blur-sm text-white px-3 py-1 rounded-full 
                          flex items-center hover:bg-white/20 transition-all">
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                  Join AR
              </button>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center">
              <div class="bg-zinc-700/50 p-2 rounded-lg">
                  <p class="text-xs text-zinc-400">Players</p>
                  <p class="text-white font-bold">1.2K</p>
              </div>
              <div class="bg-zinc-700/50 p-2 rounded-lg">
                  <p class="text-xs text-zinc-400">Duration</p>
                  <p class="text-white font-bold">48h</p>
              </div>
              <div class="bg-zinc-700/50 p-2 rounded-lg">
                  <p class="text-xs text-zinc-400">Reward</p>
                  <p class="text-white font-bold">$50K</p>
              </div>
          </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-tr from-purple-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity"></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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-2xl p-6 max-w-[18rem] shadow-xl hover:shadow-2xl transition-shadow">
      <div class="flex items-center mb-6">
          <div class="relative">
              <div class="w-12 h-12 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500 
                          animate-pulse"></div>
              <svg class="w-6 h-6 text-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" 
                   fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
              </svg>
          </div>
          <h3 id='nova-ai'  id="boomdevs_138" class="text-xl font-bold ml-4" >Nova AI</h3>
      </div>
      <div class="space-y-4 mb-6">
          <div class="flex items-center justify-between p-3 bg-slate-100 rounded-lg">
              <span class="text-sm">Current Task</span>
              <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Analyzing</span>
          </div>
          <div class="h-1 bg-slate-200 rounded-full overflow-hidden">
              <div class="w-2/3 h-full bg-gradient-to-r from-purple-500 to-blue-500 
                         animate-progress"></div>
          </div>
      </div>
      <div class="grid grid-cols-2 gap-2">
          <button class="p-2 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors 
                       flex items-center justify-center">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 12M6 6l12 6"/>
              </svg>
          </button>
          <button class="p-2 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors 
                       flex items-center justify-center">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
          </button>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-xl p-5 max-w-[18rem] transform hover:rotate-[-1deg] transition-transform">
      <div class="flex items-center justify-between mb-4">
          <div class="flex items-center">
              <img decoding="async" src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" 
                   class="w-8 h-8 mr-3">
              <div>
                  <h3 id='bitcoin'  id="boomdevs_141" class="text-white font-bold" >Bitcoin</h3>
                  <p class="text-zinc-400 text-sm">BTC/USD</p>
              </div>
          </div>
          <span class="text-green-400 text-sm">▲ 2.4%</span>
      </div>
      <div class="relative h-32 mb-4">
          <div class="absolute inset-0 bg-gradient-to-r from-orange-500/20 to-yellow-500/20 
                      rounded-xl"></div>
          <div class="relative z-10 p-4">
              <div class="text-2xl font-bold text-white">$29,450.76</div>
              <div class="text-zinc-400 text-sm">24h Volume: $12.4B</div>
          </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
          <button class="py-2 bg-zinc-700 rounded-lg text-white hover:bg-zinc-600 
                       transition-colors flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
              </svg>
              Buy
          </button>
          <button class="py-2 bg-zinc-700 rounded-lg text-white hover:bg-zinc-600 
                       transition-colors flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
              </svg>
              Sell
          </button>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-100 min-h-screen flex items-center justify-center">
  <div class="bg-white rounded-2xl p-6 max-w-[18rem] text-center shadow-lg">
      <div class="mb-6">
          <div class="breath-circle w-32 h-32 bg-blue-100 rounded-full mx-auto 
                      flex items-center justify-center relative">
              <div class="inner-circle absolute inset-4 bg-blue-200 rounded-full 
                         animate-pulse"></div>
              <span class="text-2xl font-bold text-blue-600 z-10">4-7-8</span>
          </div>
      </div>
      <h3 id='breathing-exercise'  id="boomdevs_144" class="text-xl font-bold mb-2" >Breathing Exercise</h3>
      <p class="text-slate-600 mb-4">Follow the rhythm for stress relief</p>
      <div class="grid grid-cols-3 gap-4 text-sm mb-4">
          <div class="bg-blue-100 p-2 rounded-lg">
              <div class="text-blue-600 font-bold">4s</div>
              <div class="text-slate-500">Inhale</div>
          </div>
          <div class="bg-blue-100 p-2 rounded-lg">
              <div class="text-blue-600 font-bold">7s</div>
              <div class="text-slate-500">Hold</div>
          </div>
          <div class="bg-blue-100 p-2 rounded-lg">
              <div class="text-blue-600 font-bold">8s</div>
              <div class="text-slate-500">Exhale</div>
          </div>
      </div>
      <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 
                  transition-colors flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
          </svg>
          Start Session
      </button>
  </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-xl p-4 w-[16rem] group relative overflow-hidden">
      <div class="relative overflow-hidden rounded-lg mb-4">
          <img decoding="async" src="https://images.nightcafe.studio/jobs/PPusr3jirCb2puScSHZE/PPusr3jirCb2puScSHZE--0--hydqe.jpg?tr=w-1600,c-at_max" 
               class="w-full h-48 object-cover group-hover:scale-110 transition-transform">
          <div class="absolute inset-0 bg-gradient-to-t from-zinc-900/60"></div>
          <div class="absolute bottom-2 left-2 text-white">
              <div class="text-sm">Digital Art #042</div>
              <div class="text-xs text-zinc-300">by Metaverse Studio</div>
          </div>
      </div>
      <div class="flex justify-between items-center mb-4">
          <div class="flex items-center">
              <img decoding="async" src="https://cryptologos.cc/logos/ethereum-eth-logo.png" 
                   class="w-6 h-6 mr-2">
              <span class="text-white font-bold">2.1 ETH</span>
          </div>
          <div class="flex items-center text-zinc-400">
              <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
              </svg>
              142
          </div>
      </div>
      <div class="grid grid-cols-2 gap-3">
          <button class="py-2 bg-zinc-700 rounded-lg text-white hover:bg-zinc-600 
                       transition-colors flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
              </svg>
              Buy
          </button>
          <button class="py-2 bg-zinc-700 rounded-lg text-white hover:bg-zinc-600 
                       transition-colors flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
              </svg>
              Share
          </button>
      </div>
      <div class="absolute top-4 right-4 bg-zinc-900/50 p-2 rounded-full">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
          </svg>
      </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl p-6 w-[20rem] relative overflow-hidden group transform hover:rotate-x-6 hover:rotate-y-6 transition-[transform] duration-500">
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(98,0,234,0.1)_0%,transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity"></div>
      <div class="relative z-10">
          <div class="flex items-center justify-between mb-6">
              <h3 id="boomdevs_149" class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400">
                  Qubit Controller
              </h3>
              <div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse"></div>
          </div>
          <div class="quantum-core h-32 rounded-xl bg-zinc-700 mb-6 relative overflow-hidden">
              <div class="absolute inset-0 bg-[conic-gradient(from_90deg_at_50%_50%,#6d28d9_0%,#4338ca_50%,#6d28d9_100%)] opacity-30"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center 
                              animate-quantum-flux">
                      <div class="w-8 h-8 bg-purple-500 rounded-full"></div>
                  </div>
              </div>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center">
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-zinc-700 transition-colors cursor-pointer">
                  <p class="text-xs text-purple-400">Entangle</p>
                  <p class="text-white text-sm font-mono">83%</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-zinc-700 transition-colors cursor-pointer">
                  <p class="text-xs text-purple-400">Coherence</p>
                  <p class="text-white text-sm font-mono">1.7μs</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-zinc-700 transition-colors cursor-pointer">
                  <p class="text-xs text-purple-400">Qubits</p>
                  <p class="text-white text-sm font-mono">1.2K</p>
              </div>
          </div>
      </div>
  </div>
</body>


    <style style="display: none;">  
        @keyframes quantum-flux {
            0% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.3; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }
        .quantum-glow {
            box-shadow: 0 0 40px rgba(98, 0, 234, 0.2);
        }
    </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="product-card bg-white rounded-2xl overflow-hidden max-w-[18rem] relative gradient-bg product-shadow transform hover:-translate-y-2 transition-transform duration-300">
        <!-- Floating Product Image -->
        <div class="product-image absolute top-0 left-1/2 transform -translate-x-1/2 w-48 h-48 bg-white rounded-full p-4 shadow-lg">
            <img decoding="async" 
                 src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" 
                 alt="Product" 
                 class="circle-image">
        </div>
        <!-- Product Details -->
        <div class="pt-32 pb-6 px-6 text-center">
            <h3 id='wireless-headphones-1'  id="boomdevs_152" id='wireless-headphones-1' id="boomdevs_152" class="text-xl font-bold text-gray-800" >Wireless Headphones</h3>
            <p class="text-sm text-gray-500 mt-1">Premium Sound Quality</p>
            <!-- Rating -->
            <div class="flex items-center justify-center mt-3">
                <div class="flex text-yellow-400">
                    ★★★★★
                </div>
                <span class="text-gray-600 ml-2">(128 reviews)</span>
            </div>
            <!-- Price -->
            <div class="mt-4">
                <span class="text-2xl font-bold text-gray-800">$199.99</span>
                <del class="text-gray-500 ml-2">$249.99</del>
            </div>
            <!-- Add to Cart Button -->
            <button class="w-full mt-6 bg-black text-white py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                Add to Cart
            </button>
        </div>
    </div>
</body>


    <style>
        .product-shadow {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        .product-image {
            transform: translateY(-20%);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .product-card:hover .product-image {
            transform: translateY(-25%) scale(1.05);
            box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
        }
        .circle-image {
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image fits perfectly inside the circle */
        }
    </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl overflow-hidden max-w-[18rem] flex">
      <!-- Visual Side -->
      <div class="w-1/3 bg-gradient-to-b from-purple-600 to-indigo-600 flex items-center justify-center">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
          </svg>
      </div>
      <!-- Text Side -->
      <div class="w-2/3 p-4">
          <h3 id='quantum-sync'  id="boomdevs_155" class="text-lg font-bold text-white" >Quantum Sync</h3>
          <p class="text-sm text-zinc-400 mt-1">Synchronizing Realities</p>
          <div class="mt-4">
              <div class="text-sm text-zinc-400">Progress</div>
              <div class="text-xl font-bold text-purple-400">67%</div>
          </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="relative max-w-[18rem]">
      <!-- Bottom Layer -->
      <div class="absolute inset-0 bg-zinc-800 rounded-2xl layer-1"></div>
      <!-- Middle Layer -->
      <div class="absolute inset-0 bg-zinc-700 rounded-2xl layer-2"></div>
      <!-- Top Layer -->
      <div class="relative bg-zinc-600 rounded-2xl p-6">
          <h3 id='stellar-fusion'  id="boomdevs_158" class="text-xl font-bold text-white" >Stellar Fusion</h3>
          <p class="text-sm text-zinc-300 mt-2">Harness the Stars</p>
          <div class="mt-4">
              <div class="text-sm text-zinc-400">Energy Output</div>
              <div class="text-2xl font-bold text-cyan-400">4.8TW</div>
          </div>
      </div>
  </div>
</body>


    <style>
      .layer-1 {
          transform: rotate(-3deg) translateY(-10px);
      }
      .layer-2 {
          transform: rotate(2deg) translateY(-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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl p-6 max-w-[18rem] relative overflow-hidden group">
      <div class="absolute inset-0 fractal-container opacity-30"></div>
      <div class="relative z-10">
          <div class="text-center mb-6">
              <h3 id="boomdevs_161" class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">
                  Fractal Universe
              </h3>
              <p class="text-sm text-zinc-400 mt-1">Infinite Patterns</p>
          </div>
          <div class="fractal-preview h-32 rounded-xl bg-zinc-700 mb-6 relative overflow-hidden flex items-center justify-center">
              <div class="absolute inset-0 flex items-center justify-center">
                  <div class="w-24 h-24 border-4 border-purple-400/30 rounded-full animate-spin-slow"></div>
              </div>
              <div class="text-purple-400 text-lg font-bold">Depth: ∞</div>
          </div>
          <div class="grid grid-cols-2 gap-4">
              <div class="p-3 bg-zinc-700/50 rounded-lg hover:bg-purple-400/10 transition-colors">
                  <p class="text-xs text-purple-400">Complexity</p>
                  <p class="text-white text-sm">1.2M</p>
              </div>
              <div class="p-3 bg-zinc-700/50 rounded-lg hover:bg-purple-400/10 transition-colors">
                  <p class="text-xs text-purple-400">Symmetry</p>
                  <p class="text-white text-sm">92%</p>
              </div>
          </div>
      </div>
  </div>
</body>


    <style>
      .fractal-container {
          background: conic-gradient(
              from 90deg at 50% 50%,
              #6d28d9 0%,
              #9333ea 25%,
              #c026d3 50%,
              #db2777 75%,
              #6d28d9 100%
          );
          mask: radial-gradient(transparent 50%, black 70%);
          animation: fractal-spin 10s linear infinite;
      }
      @keyframes fractal-spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl p-6 max-w-[18rem] relative overflow-hidden group animate-time-distortion">
      <div class="absolute inset-0 time-vortex opacity-20"></div>
      <div class="relative z-10">
          <div class="flex items-center justify-between mb-6">
              <h3 id='chronal-monitor'  id="boomdevs_164" class="text-xl font-bold text-amber-400" >Chronal Monitor</h3>
              <div class="flex items-center">
                  <div class="w-2 h-2 bg-amber-400 rounded-full mr-2 animate-pulse"></div>
                  <span class="text-amber-400 text-sm">ΔT+0.3s</span>
              </div>
          </div>
          <div class="time-display h-32 rounded-xl bg-zinc-700 mb-6 relative overflow-hidden">
              <div class="absolute inset-0 flex items-center justify-center">
                  <div class="text-4xl font-bold text-amber-400">
                      12:47:85
                  </div>
              </div>
              <div class="absolute bottom-2 right-2 text-amber-400 text-xs">
                  Local Temporal Variance
              </div>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center">
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-amber-400/10 transition-colors">
                  <p class="text-xs text-amber-400">Past</p>
                  <p class="text-white text-sm">-2.1s</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-amber-400/10 transition-colors">
                  <p class="text-xs text-amber-400">Present</p>
                  <p class="text-white text-sm">±0.0</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg hover:bg-amber-400/10 transition-colors">
                  <p class="text-xs text-amber-400">Future</p>
                  <p class="text-white text-sm">+0.3s</p>
                  </div>
          </div>
      </div>
  </div>
</body>


    <style>
      @keyframes time-distortion {
          0% { transform: scale(1) rotate(0deg); }
          50% { transform: scale(1.02) rotate(0.5deg); }
          100% { transform: scale(1) rotate(0deg); }
      }
      .time-vortex {
          background: conic-gradient(from 180deg at 50% 50%,
              #f59e0b 0deg,
              #d97706 90deg,
              #b45309 180deg,
              #92400e 270deg,
              #f59e0b 360deg
          );
          mask: radial-gradient(transparent 40%, black 70%);
      }
  </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="bg-zinc-800 rounded-2xl p-6 max-w-[18rem] relative overflow-hidden group">
      <div class="absolute inset-0 bg-[radial-gradient(circle,rgba(139,92,246,0.1)_0%,transparent_60%)]"></div>
      <div class="relative z-10">
          
          <div class="sensor-chamber h-32 rounded-xl bg-zinc-700 mb-6 relative overflow-hidden particle-trail">
              <div class="absolute inset-0 flex items-center justify-center">
                  <div class="w-16 h-16 border-2 border-purple-400 rounded-full 
                            animate-spin-slow opacity-30"></div>
              </div>
              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-purple-400 text-2xl">
                  0.3eV/c²
              </div>
          </div>
          <div class="flex items-center justify-between mb-6">
              <h3 id='wimp-detector'  id="boomdevs_167" class="text-xl font-bold text-purple-400" >WIMP Detector</h3>
              <div class="relative">
                  <div class="absolute inset-0 bg-purple-500/20 blur-sm"></div>
                  <div class="relative px-3 py-1 rounded-full bg-purple-500/30 text-purple-300 text-sm">
                      ACTIVE
                  </div>
              </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
              <div class="p-3 bg-zinc-700/50 rounded-lg">
                  <p class="text-xs text-purple-400 mb-2">Detection Rate</p>
                  <div class="flex items-center">
                      <div class="w-full bg-zinc-600 rounded-full h-1">
                          <div class="bg-purple-400 h-1 rounded-full w-1/5"></div>
                      </div>
                      <span class="text-purple-400 text-xs ml-2">22Hz</span>
                  </div>
              </div>
              <div class="p-3 bg-zinc-700/50 rounded-lg">
                  <p class="text-xs text-purple-400 mb-2">Confidence</p>
                  <div class="flex items-center">
                      <div class="w-full bg-zinc-600 rounded-full h-1">
                          <div class="bg-purple-400 h-1 rounded-full w-3/4"></div>
                      </div>
                      <span class="text-purple-400 text-xs ml-2">83%</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</body>


    <style>
      @keyframes particle-flow {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
      }
      .particle-trail::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.3) 50%, transparent 100%);
          animation: particle-flow 2s infinite linear;
      }
  </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-zinc-900 min-h-screen flex items-center justify-center">
  <div class="hologram-effect bg-zinc-800 rounded-xl p-6 max-w-[18rem] relative overflow-hidden transform hover:rotate-x-3 hover:rotate-y-3 transition-transform duration-500">
      <div class="absolute inset-0 hologram-grid"></div>
      <div class="relative z-10">
          <div class="flex items-center justify-between mb-6">
              <h3 id='projection-matrix'  id="boomdevs_170" class="text-xl font-bold text-emerald-400" >Projection Matrix</h3>
              <div class="flex space-x-2">
                  <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
                  <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse delay-100"></div>
                  <div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse delay-200"></div>
              </div>
          </div>
          <div class="hologram-display h-32 rounded-lg bg-zinc-700 mb-6 relative overflow-hidden">
              <div class="absolute inset-0 flex items-center justify-center">
                  <div class="w-24 h-24 border-2 border-emerald-400 rounded-full 
                            animate-spin-slow [animation-direction:reverse] opacity-30"></div>
              </div>
              <div class="absolute inset-0 hologram-reflection"></div>
              <div class="absolute bottom-2 left-2 text-emerald-400 text-sm">
                  Resolution: 4K Holo
              </div>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center">
              <div class="p-2 bg-zinc-700/50 rounded-lg cursor-pointer hover:bg-emerald-400/10 transition-colors">
                  <p class="text-xs text-emerald-400">X-Axis</p>
                  <p class="text-white text-sm">+24°</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg cursor-pointer hover:bg-emerald-400/10 transition-colors">
                  <p class="text-xs text-emerald-400">Y-Axis</p>
                  <p class="text-white text-sm">-12°</p>
              </div>
              <div class="p-2 bg-zinc-700/50 rounded-lg cursor-pointer hover:bg-emerald-400/10 transition-colors">
                  <p class="text-xs text-emerald-400">Z-Depth</p>
                  <p class="text-white text-sm">3.2m</p>
              </div>
          </div>
      </div>
  </div>
</body>


    <style>
      .hologram-effect {
          transform: perspective(1000px) rotateX(15deg) rotateY(-5deg);
          box-shadow: 0 0 50px rgba(16, 185, 129, 0.2);
      }
      .hologram-grid {
          background-image: 
              linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
          background-size: 20px 20px;
      }
      .hologram-reflection {
          background: linear-gradient(transparent 60%, rgba(16, 185, 129, 0.05));
      }
  </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!

<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="tilted-card bg-white rounded-2xl overflow-hidden max-w-[18rem] relative">
      <!-- Product Image -->
      <div class="card-image w-full h-36 flex items-center justify-center overflow-hidden bg-gray-100">
          <img decoding="async" 
               src="https://images.unsplash.com/photo-1590658006821-04f4008d5717" 
               alt="Fitness Tracker" 
               class="w-full h-full object-cover">
      </div>
      <!-- Product Details -->
      <div class="card-content p-4 text-center">
          <h3 id='fitpro-x3'  id="boomdevs_173" class="text-xl font-bold text-gray-800" >FitPro X3</h3>
          <p class="text-sm text-gray-500 mt-1">Your Ultimate Fitness Companion</p>
          <!-- Rating -->
          <div class="flex items-center justify-center mt-2">
              <div class="flex text-yellow-400">
                  ★★★★★
              </div>
              <span class="text-gray-600 ml-2">(312 reviews)</span>
          </div>
          <!-- Price -->
          <div class="mt-3">
              <span class="text-2xl font-bold text-gray-800">$179.99</span>
              <del class="text-gray-500 ml-2">$199.99</del>
          </div>
          <!-- Add to Cart Button -->
          <button class="w-full mt-4 bg-black text-white py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
              Buy Now
          </button>
      </div>
  </div>
</body>


    <style>
      .tilted-card {
          transform: perspective(1000px) rotateX(10deg) rotateY(-10deg);
          transform-style: preserve-3d;
          transition: transform 0.5s ease, box-shadow 0.5s ease;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      }
      .tilted-card:hover {
          transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
          box-shadow: 0 40px 60px rgba(0, 0, 0, 0.3);
      }
      .card-content {
          transform: translateZ(50px);
      }
      .card-image {
          transform: translateZ(30px);
          transition: transform 0.5s ease;
      }
      .tilted-card:hover .card-image {
          transform: translateZ(50px) scale(1.1);
      }
  </style>

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

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

60 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

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