JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">

    <div class="col-md-2 col-sm-4">
        <div class="card">
            <img src="https://instagram.fist1-2.fna.fbcdn.net/vp/068712f8f0717b55e1921a064b01d8bb/5D49D43D/t51.2885-19/s150x150/55928078_577157142778849_8959891160638160896_n.jpg?_nc_ht=instagram.fist1-2.fna.fbcdn.net"
                 class="card-img-top" alt="...">
            <img src="https://instagram.fist1-2.fna.fbcdn.net/vp/068712f8f0717b55e1921a064b01d8bb/5D49D43D/t51.2885-19/s150x150/55928078_577157142778849_8959891160638160896_n.jpg?_nc_ht=instagram.fist1-2.fna.fbcdn.net"
                 class="profile-photo" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
            </div>
        </div>
    </div>



    <div class="col-md-2 col-sm-4">
        <div class="card">
            <img src="https://instagram.fist1-2.fna.fbcdn.net/vp/068712f8f0717b55e1921a064b01d8bb/5D49D43D/t51.2885-19/s150x150/55928078_577157142778849_8959891160638160896_n.jpg?_nc_ht=instagram.fist1-2.fna.fbcdn.net"
                 class="card-img-top" alt="...">
            <img...

CSS

.content {     /* pt-4 ml-5 mr-5 */
    padding-top: 1.5rem !important;
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}


/* makes main-menu open on hover */
.nav-item:hover> .dropdown-menu {
    display: block !important;
}


.profile-photo {
    border-radius: 50px;
    padding-right: auto;
    max-width: 40%;
    object-fit: cover;
    z-index: 1;
    position: absolute;
    top: 27%;
    left: 30%;
}

.card {
    margin-bottom: 1.5rem !important;
}