Cards

<div class="border border-gray-400 dark:border-gray-600 rounded p-8 my-8">
  <h3>Card title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<div class="border border-gray-400 dark:border-gray-600 rounded p-8 my-8">
  <div class="flex flex-wrap items-center justify-between">
    <div class="lg:flex-1">
      <h3>Card title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="lg:p-0 pt-4">
      <a class="btn btn-primary" href="">Button</a>
    </div>
  </div>
</div>

<div class="border border-gray-400 dark:border-gray-600 rounded my-8 lg:w-1/2 w-full">
  <div class="image-placeholder">
    <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ah1x7p05uxtgx4v4e2tmreiktx9rxdvz" class="fill-current text-gray-500 icon-xl"><title id="ah1x7p05uxtgx4v4e2tmreiktx9rxdvz">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>

  </div>
  <div class="p-6">
    <h3>Card title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

<div class="border border-gray-400 dark:border-gray-600 rounded my-8 lg:w-1/2 w-full">
  <div class="image-placeholder">
    <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a3fqzs34rwxpjok2m9t3zbnrfw3y4mke" class="fill-current text-gray-500 icon-xl"><title id="a3fqzs34rwxpjok2m9t3zbnrfw3y4mke">Icons/photo</title>
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>

  </div>
  <div class="p-6">
    <h3>Card title</h3>
    <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <a class="btn btn-primary btn-small" href="#">Button</a>
  </div>
</div>