JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
body {
    font-family: 'Montserrat';
    background: #F5F5F5;
    -ms-overflow-style: scrollbar;
}

.cardContent {
    background: white;
    border-radius: 9px;
    box-shadow: 1px 2px 5px 0px rgba(170, 170, 170, 0.51);
    padding: 20px 30px;
    min-height: 100px;
    margin: 4px;
}

.content{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    width: 100%;
}

.header2{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #636363;
}

.header3{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #636363;
    font-weight: 600;
    text-transform: uppercase;
}

.header4{
    font-family: 'Roboto', sans-serif;
    font-size: 12px !important;
    color: #636363;
}

.header5{
    font-family: 'Roboto', sans-serif;
    font-size: 11px !important;
    color: #8E8E8E;
    margin-bottom: 5px;
}

.myopinions .card{
    background-color: #5bbbef;
    background-size: 107%;
    box-shadow: 1px 2px 5px 0px rgba(64, 64, 64, 0.51);
}

.myopinions .card .header3{
    color : #fff;
}
.myopinions .card .header4{
    color : #fff;
}
.myopinions .card .header5{
    color : #fff;
}

.myopinions .dropdown{
    color : #fff;
}
.myopinions .material-icons{
    color : #fff;
}

.myopinions .img-circle{
    width: 96px !important;
    height: 96px !important;
    border: solid 3px white;
}

@media (max-width: 720px ){
    .myopinions{
        overflow: auto;
    }
}

</style>
<div class="myopinions">
    <div>
        <div class="my-class">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 no-pd">
                <div class="cardContent row pd-l-5 pd-r-5 pd-b-30 pd-t-30 card">
                    <div>
                        <div class="col-xs-4 text-center">
                            <div class="avatar-container" style="height: 90px">
                                <img...

CSS

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/CWB0XYA8bzo0kSThX0UTuA.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* montserrat-200 - latin */
@font-face {
  font-family:...