JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="teacher-grid row">
    <div class="teacher-item col-md-12">
        <div class="teacher-card row">
            <div class="teacher-media col-md-4">
                <div class="teacher-img" style="url" >Media</div>
            </div>
            <div class="teacher-content col-md-8">
                <h3 class="teacher-title">Title</h3>
                <div class="teacher-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum distinctio deserunt nesciunt laboriosam in saepe dolorem sit illum a pariatur aperiam nisi, ad ab doloremque ut corporis aliquid quibusdam!</div>
            </div>
        </div>
    </div>
    
     <div class="teacher-item col-md-12">
        <div class="teacher-card row">
            <div class="teacher-media col-md-4">
                <div class="teacher-img" style="url" >Media</div>
            </div>
            <div class="teacher-content col-md-8">
                <h3 class="teacher-title">Title</h3>
                <div class="teacher-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum distinctio deserunt nesciunt laboriosam in saepe dolorem sit illum a pariatur aperiam nisi, ad ab doloremque ut corporis aliquid quibusdam!</div>
            </div>
        </div>
    </div>
    
     <div class="teacher-item col-md-12">
        <div class="teacher-card row">
            <div class="teacher-media col-md-4">
                <div class="teacher-img" style="url" >Media</div>
            </div>
            <div class="teacher-content col-md-8">
                <h3 class="teacher-title">Title</h3>
                <div class="teacher-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum distinctio deserunt nesciunt laboriosam in saepe dolorem sit illum a pariatur aperiam nisi, ad ab doloremque ut corporis aliquid quibusdam!</div>
            </div>
        </div>
    </div>
    
     <div class="teacher-item col-md-12">
     ...

CSS

.block {
    position: relative;
    background-position: center top;
    -webkit-background-size: cover;
    background-size: cover;
}

.block:before {
    opacity: 0.6;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
}

img {
    max-width: 100%;
}

.section  {
    overflow-x: hidden;
}

.section img {
    height: 100%;
    max-width: none;
}

.block .container {
    position: relative;
    z-index: 1;
}

.teacher-content {
    border-bottom: 1px solid red;
}