JSFiddle - React, Tailwind, and code Playground

by pj_js15

HTML

<div class="image-text-container">
        <img src="your-image.jpg" alt="Image">
        <div class="text">
            <p>This is the text at the bottom of the container.</p>
        </div>
    </div>

SCSS

.image-text-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  /* Adjust the width as needed */
  border: 1px solid #ccc;
  overflow: hidden;
  background: #D1A89A;
  border-radius: 8px;
}

.image-text-container img {
  width: 100%;
  height: auto;
}

.image-text-container .text {
  background: #D1A89A;
  padding: 10px;
  color: white;
  text-align: center;
}