JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<div class="card">
  
    
  <div class="text-container">
    <h1>
    Heading
    </h1>
    <p>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTniuszbBKKSbbpNIwF-CBO10ZdqWtBbsTrQ&usqp=CAU" />
    Preview of the text to appear appears here. It can be quite long, so here goes. Hopefully, nobody will ever read this.
    </p>
  </div>
</div>

CSS

.card{
  height: 200px;
  width: 100%;
  
  padding: 16px;
  
  background-color: rebeccapurple;
  border: 5px solid beige;

  
  gap: 16px;
}

.text-container{
  height: 100%;
  width: 70%;
  
  font-family: sans-serif;
  color: white;
  
  float: left;
}

img{
  float: left;
  object-fit: cover;
  height: 100%;
  width: 100%;
}