CodePen Embed - Combining Pseudo-classes and Pseudo-elements

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="max-w-sm rounded overflow-hidden shadow-lg transition-transform duration-300 transform hover:scale-105 bg-slate-200">
  <img src="https://i.ibb.co/z8kWxyL/pexels-andrea-piacquadio-3979198-removebg-preview.png" alt="Image" class="max-w-l h-auto ">
    <div class="px-6 py-4 bg-slate-50">
     <div class="font-bold text-xl mb-2">Card Title</div>
       <p class="text-gray-700 text-base first-line:text-red-600 first-line:font-bold first-line:bg-yellow-100 first-line:uppercase">The First line of the discription in uppercase and different color.</p>
    </div>
  </div>

</body>
</html>

This Pen is owned by Vinish on CodePen.

See more by @Pimjo on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.