JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="CONTACT_US_OPTIONS">
    <div class="CONTACT_OPTION">
        <span class="GREEN_CIRCLE">
            <span class="CONTACT_ICON"><i class="fa fa-phone" aria-hidden="true"></i></span>
        </span>
        <div class="CONTACT_DESCRIPTION">Give us a call</div>
        <div class="CONTACT_TITLE">Phone</div>
        <div class="CONTACT_TEXT">
            <a href="tel:718-436-1532">(718) 436-1532</a>
        </div>
        </div>
    <div class="CONTACT_OPTION">
        <span class="GREEN_CIRCLE">
        <span class="CONTACT_ICON"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
        </span>
        <div class="CONTACT_DESCRIPTION">Send us an email</div>
        <div class="CONTACT_TITLE">Email</div>
        <div class="CONTACT_TEXT">
            <a href="mailto:[email protected]">[email protected]</a>
        </div>
    </div>
    <div class="CONTACT_OPTION">
        <span class="GREEN_CIRCLE">
        <span class="CONTACT_ICON"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
        </span>
        <div class="CONTACT_DESCRIPTION">Visit our office</div>
        <div class="CONTACT_TITLE">Address</div>
        <div class="CONTACT_TEXT">
        <a href="https://www.google.com/maps/place/1781+Flatbush+Ave,+Brooklyn,+NY+11210/@40.6266874,-73.9429699,17z/data=!3m1!4b1!4m5!3m4!1s0x89c244abecac3aa3:0x3edf0223c562a36!8m2!3d40.6266874!4d-73.9407812">1781 Flatbush Ave<br/>Brooklyn, NY 11210</a>
        </div>
    </div>
</div>

CSS

.CONTACT_US_OPTIONS {
  display: flex;
  width: 100%;

}/*#CONTACT_US_OPTIONS*/

.CONTACT_OPTION {
    border: 1px solid rgb(204, 204, 204);
    float: left;
    padding: 10px 10px 10px 10px;
    text-align:center;
    margin: 0px 10px;
    flex: 1;
}

.GREEN_CIRCLE {
    font: normal normal 400 normal 45px / 84px ThemeIcons;
    background: rgb(23, 164, 85) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 50% 50% 50% 50%;
    padding: 10px;
    width: 4em;
    height: 4em;
    display: block;
    box-sizing: border-box;
    position: relative;
}

.GREEN_CIRCLE i {
  background: white;
  width: 1em;
  height: 1em;
  font-size: 1.5em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.CONTACT_ICON {
    font: normal normal 400 normal 45px / 84px ThemeIcons;
    background-color: rgb(23, 164, 85);
    color: rgb(255, 255, 255);
}

.CONTACT_DESCRIPTION {
    color: rgb(136, 136, 136);
    text-transform: uppercase;
    font: normal normal 400 normal 11px / 15.9995px Arial, Helvetica, sans-serif;
    margin: 0px 0px 5px;
}

.CONTACT_TITLE {
    color: rgb(68, 68, 68);
    font: normal normal 400 normal 24.999px / 29.9988px "Open Sans", georgia, serif;
    margin: 0px 0px 5px;

}
.CONTACT_TEXT {
    color: rgb(68, 68, 68);
    font: normal normal 400 normal 18px / 22.5px Arial, Helvetica, sans-serif;
}

.CONTACT_TEXT a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
    border-bottom:none;
}