<!-- card strong -->
<div class="shadow-[4px_4px_0_0_#000000] border-black rounded-lg border-2 py-4 px-6 text-base bg-white dark:bg-neutral-600">
  <p>Hello World</p>
</div>
<div class="shadow-[4px_4px_0_0_#000000] border-black rounded-lg border-2 py-4 px-6 text-base dark:text-black bg-yellow-300">
  <p>Hello World</p>
</div>
<div class="shadow-[4px_4px_0_0_#000000] border-black rounded-lg border-2 py-4 px-6 text-base dark:text-black bg-zinc-300">
  <p>Hello World</p>
</div>

<!-- card simple -->
<div class="hover:shadow-[4px_4px_0_0_#000000] hover:-translate-x-1 hover:-translate-y-1 duration-300 border-black rounded-lg border py-4 px-6 text-base bg-white dark:bg-neutral-600">
  <p>Hello World</p>
</div>
<div class="hover:shadow-[4px_4px_0_0_#000000] hover:-translate-x-1 hover:-translate-y-1 duration-300 border-black rounded-lg border py-4 px-6 text-base dark:text-black bg-red-300">
  <p>Hello World</p>
</div>
<div class="hover:shadow-[4px_4px_0_0_#000000] hover:-translate-x-1 hover:-translate-y-1 duration-300 border-black rounded-lg border py-4 px-6 text-base dark:text-black bg-lime-300">
  <p>Hello World</p>
</div>
              
            

              
<!-- card strong -->
<div class="hsdfdsfhsdf oskasdadiaa bg-white border-2 border-black rounded-lg dark:bg-neutral-600 shadow-[6px_6px_0_0_#000000] overflow-hidden">
  <img class="w-full h-auto" src="../src/img/works/1.jpg" alt="Image Description">
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold">
      Example Card title
    </h3>
    <span class="text-sm text-neutral-500 dark:text-neutral-400 font-medium">Jan 12, 2024</span>
    <p class="mt-1 text-neutral-500 dark:text-neutral-400">
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </p>
  </div>
</div>

<!-- card simple -->
<div class="hsdfdsfhsdf oskasdadiaa bg-white border border-black rounded-lg dark:bg-neutral-600 hover:-translate-x-0.5 hover:-translate-y-0.5 duration-300 ease-in-out hover:shadow-[6px_6px_0_0_#000000] overflow-hidden">
  <img class="w-full h-auto" src="../src/img/works/1.jpg" alt="Image Description">
  <div class="p-4 md:p-5">
    <h3 class="text-lg font-bold">
      Example Card title
    </h3>
    <span class="text-sm text-neutral-500 dark:text-neutral-400 font-medium">Jan 12, 2024</span>
    <p class="mt-1 text-neutral-500 dark:text-neutral-400">
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </p>
  </div>
</div>
              
            

              
<!-- Testimonial -->
<div class="bg-yellow-300 py-6 px-8 rounded-lg border-2 border-black shadow-[6px_6px_0_0_#000000]">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-4 mb-4">
    <img src="../src/img/avatar/male2.jpg" alt="Client 1" class="w-12 h-12 rounded-full inline-block border-2 border-black bg-yellow-300">
    <div class="inline-block">
      <h3 class="text-lg font-bold text-black">David</h3>
      <p class="text-neutral-600">Donz Corp</p>
    </div>
  </div>
  <!-- rating -->
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-2 mb-2 text-xl">
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
  </div>
  <p class="text-neutral-700">Working with [Roman] was an incredible experience. Their attention to detail and creative flair brought our vision to life. Highly recommended!</p>
</div>

<!-- Testimonial -->
<div class="bg-yellow-300 py-6 px-8 rounded-lg border border-black hover:shadow-[6px_6px_0_0_#000000] hover:-translate-x-0.5 hover:-translate-y-0.5 duration-300 ease-in-out">
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-4 mb-4">
    <img src="../src/img/avatar/male4.jpg" alt="Client 1" class="w-12 h-12 rounded-full inline-block border-2 border-black bg-yellow-300">
    <div class="inline-block">
      <h3 class="text-lg font-bold text-black">Roman</h3>
      <p class="text-neutral-600">Jans Corp</p>
    </div>
  </div>
  <!-- rating -->
  <div class="hsdfdsfhsdf pdskdmsdnjw gap-2 mb-2 text-xl">
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
    <i class="bi bi-star-fill text-black"></i>
  </div>
  <p class="text-neutral-700">Working with [Dean] was an incredible experience. Their attention to detail and creative flair brought our vision to life. Highly recommended!</p>
</div>