<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="https://bit.ly/2DxN2Yk" alt="Mediasoft team">
  <div class="px-6 pt-5">
    <div class="font-bold text-xl mb-3">The Mediasoft team</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#mediasoft</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tailwind</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#CSS</span>
  </div>
</div>
body {
  font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, sans-serif;
  background-color: #EFEFEF;
  padding: 30px;
  
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.