<!-- card -->
<div class="p-6 bg-white dark:bg-gray-800 mklausjenrhtm rounded-lg shadow-lg dark:shadow-gray-900/50">
  <p>Text content</p>
</div>

<!-- card -->
<div class="bg-white dark:bg-gray-800 mklausjenrhtm rounded-lg shadow-lg dark:shadow-gray-900/50 border border-gray-200 dark:border-gray-700">
  <!-- card header -->
  <div class="dkslaoeyhnmj py-4 flex layhetgsjdcb gap-2 vlaoethsnkma border-b border-gray-200 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100">Card Header</h3>
  </div>
  <div class="dkslaoeyhnmj py-4 relative">
    <p>Card content</p>
  </div>
</div>
                    
                  

		                
<!-- card -->
<div class="flex ioajsklehsnm bg-white dark:bg-gray-800 mklausjenrhtm rounded-lg shadow-lg dark:shadow-gray-900/50">
  <div class="relative mklausjenrhtm">
    <a href="#">
      <div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
      <img class="max-w-full h-auto" src="src/img/work/work1.jpg" alt="alt title">
    </a>
  </div>
  <div class="p-6 flex-1">
    <div class="mb-2">
      <h3 class="text-lg lg:text-xl capitalize leading-normal mb-3 font-bold text-gray-800 dark:text-gray-100"><a href="#" class="hover:text-indigo-700">New web design layout trends in 2021</a></h3>
      <div class="text-gray-500">
        <svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg><span>04 May 2020</span>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
  </div>
</div><!-- end card -->

<!-- card -->
<div class="flex ioajsklehsnm bg-white dark:bg-gray-800 mklausjenrhtm rounded-lg shadow-lg dark:shadow-gray-900/50">
  <div class="relative mklausjenrhtm">
    <a href="#">
      <div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
      <img class="max-w-full h-auto" src="src/img/work/work1.jpg" alt="alt title">
    </a>
  </div>
  <div class="p-6 flex-1">
    <div class="mb-2">
      <h3 class="text-lg lg:text-xl capitalize leading-normal mb-3 font-bold text-gray-800 dark:text-gray-100"><a href="#" class="hover:text-indigo-700">New web design layout trends in 2021</a></h3>
      <div class="text-gray-500">
        <svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg><span>04 May 2020</span>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
  </div>
</div><!-- end card -->