Card Components

<div class="bg-white rounded-xl border border-gray-200 p-6 duration-300">
  <div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg mb-6">
    <svg class="w-6 h-6 text-cyan-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  </div>
  <h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
  <p class="text-gray-600 mb-6 leading-relaxed">
    Experience blazing fast performance with our optimized infrastructure designed for speed and reliability.
  </p>
  <a href="#" class="inline-flex items-center text-cyan-700 font-semibold hover:text-cyan-800 transition-colors">
    Learn more
    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
    </svg>
  </a>
</div>

<div
  class="bg-gradient-to-br from-cyan-50 to-blue-50 border border-cyan-200 rounded-xl p-6 hover:from-cyan-100 hover:to-blue-100 transition-all duration-300 max-w-sm">
  <div class="text-center">
    <div
      class="w-16 h-16 bg-gradient-to-r from-cyan-700 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
      <svg class="w-8 h-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
    </div>
    <h3 class="text-xl font-bold text-gray-900 mb-3">Performance Boost</h3>
    <p class="text-gray-700 mb-6 leading-relaxed">
      Accelerate your workflow with our optimized tools designed for maximum efficiency and productivity.
    </p>
    <div class="space-y-3 mb-6">
      <div class="flex items-center justify-center space-x-3">
        <div class="w-3 h-3 bg-cyan-700 rounded-full"></div>
        <span class="text-sm text-gray-700">99.9% Uptime</span>
      </div>
      <div class="flex items-center justify-center space-x-3">
        <div class="w-3 h-3 bg-blue-600 rounded-full"></div>
        <span class="text-sm text-gray-700">24/7 Support</span>
      </div>
      <div class="flex items-center justify-center space-x-3">
        <div class="w-3 h-3 bg-cyan-500 rounded-full"></div>
        <span class="text-sm text-gray-700">Global CDN</span>
      </div>
    </div>
    <button class="w-full bg-gradient-to-r from-cyan-700 to-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-cyan-800 hover:to-blue-700 transition-all duration-300">
      Get Started
    </button>
  </div>
</div>

<div
  class="bg-white border-2 border-dashed border-gray-300 rounded-lg p-6 hover:border-cyan-700 hover:bg-cyan-50 transition-all duration-300 max-w-md">
  <div class="border-cyan-700">
    <div class="flex items-center mb-3">
      <div class="w-10 h-10 border-2 border-cyan-700 rounded-lg flex items-center justify-center mr-3">
        <svg class="w-5 h-5 text-cyan-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
          stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div>
        <h3 class="text-lg font-bold text-gray-900">Quality Assurance</h3>
        <span class="text-xs font-medium text-cyan-700 bg-white border border-cyan-700 px-3 py-1 rounded-full">
          Verified
        </span>
      </div>
    </div>
    <p class="text-gray-700 mb-6 leading-relaxed">
      Comprehensive testing and validation processes ensure the highest standards of quality and reliability for all
      deliverables.
    </p>
    <div class="grid grid-cols-2 gap-3 mb-6">
      <div class="text-center p-3 border border-gray-200 rounded-lg">
        <div class="text-2xl font-bold text-cyan-700">99%</div>
        <div class="text-xs text-gray-600">Accuracy</div>
      </div>
      <div class="text-center p-3 border border-gray-200 rounded-lg">
        <div class="text-2xl font-bold text-cyan-700">24h</div>
        <div class="text-xs text-gray-600">Response</div>
      </div>
    </div>
    <div class="flex space-x-3">
      <button class="flex-1 bg-cyan-700 text-white py-3 px-6 rounded-lg font-medium hover:bg-cyan-800 transition-colors">
        Learn More
      </button>
      <button class="px-6 py-3 border-2 border-cyan-700 text-cyan-700 rounded-lg font-medium hover:bg-cyan-700 hover:text-white transition-all">
        Demo
      </button>
    </div>
  </div>
</div>

<div class="bg-white rounded-xl border border-gray-200 p-6 text-center max-w-sm mx-auto">
  <div class="relative mb-6">
    <img class="w-24 h-24 rounded-full mx-auto object-cover border-4 border-cyan-100" src="https://randomuser.me/api/portraits/women/64.jpg" alt="Profile picture">
    <div
      class="absolute bottom-0 right-1/2 transform translate-x-12 translate-y-1 w-6 h-6 bg-green-500 border-2 border-white rounded-full">
    </div>
  </div>
  <h3 class="text-xl font-bold text-gray-900 mb-1">Sarah Johnson</h3>
  <p class="text-cyan-700 font-medium mb-3">Senior Product Designer</p>
  <p class="text-gray-600 text-sm mb-6 leading-relaxed">
    Passionate about creating user-centered designs that solve real problems and deliver exceptional experiences.
  </p>
  <div class="flex justify-center space-x-3 mb-6">
    <a href="#"
      class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-cyan-100 transition-colors">
      <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" 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>
    </a>
    <a href="#"
      class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-cyan-100 transition-colors">
      <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
      </svg>
    </a>
    <a href="#"
      class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-cyan-100 transition-colors">
      <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
          d="M3 8l7.89 4.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" />
      </svg>
    </a>
  </div>
  <button class="w-full bg-cyan-700 text-white py-3 px-6 rounded-lg font-semibold hover:bg-cyan-800 transition-colors">
    Connect
  </button>
</div>