JSFiddle - React, Tailwind, and code Playground

by KANDR101

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://use.fontawesome.com/releases/v5.8.1/css/all.css">

<div class="container mw-100">

  <div class="card mx-auto">

    <div class="card-header">
      OK_OKCY_NORTH_E
    </div>

    <div class="managers card-body d-flex flex-row">

      <div class="manager d-flex  bg-light mx-auto pr-2">

        <div class="position-relative" style="top: 0">
          <img src="http://wpphoto.it.att.com/cgi-bin/pix.pl?id=dj6942" alt="" class="img-avatar pb-3">

          <div class="share-buttons d-flex position-absolute bg-white d-flex justify-content-between border">
            <span style="cursor: pointer;" class="mt-auto pb-1">
              <a href="#" class="" roles="button">
                <i class="fas fa-phone align-self-centers"></i>
              </a>
            </span>
            <span style="cursor: pointer;" class="mt-auto pb-1">
              <a href="#" class="" roles="button">
                <i class="fas fa-envelope"></i>
              </a>
            </span>
            <span style="cursor: pointer;" class="mt-auto pb-1">
              <a href="#" class="" roles="button">
                <i class="fas fa-sms"></i>
              </a>
            </span>
          </div>
        </div>

        <div class="pl-2 py-1 mr-2" style="max-width:13rem">
          <div class="card-title mb-0">Manager Network Services</div>
          <div class="card-text small">Estevan Gonzales</div>
          <div class="card-text small">(888) 888-8888</div>            
        </div> 

      </div>

      <div class="manager d-flex flex-columns bg-light mx-auto pr-2">

        <div...

CSS

.manager {
    border-radius: 1rem 0.25rem 0.25rem 1rem;
    z-index: 0;
}

.img-avatar {
    border-radius: 15% 15% 0% 0%;
    width: 7rem;
    z-index: 10;
    height: 9rem;
}

.share-buttons {
    top: -3%;
    left: -5px;
    border-radius: 15% 15% 10% 10%;
    width: 109%;
    z-index: -1;
    height: 113%;
}

.share-buttons a > i {
  font-size: 14px;
}

.share-buttons a {
  border-radius: 50%;
  width: 15px;
  padding: 4px 8px;
  margin-top: 5px;
}

.share-buttons img {
  width: 25px;
  padding: 3px;
  border: 0;
  box-shadow: 0;
  display: inline;
}

JavaScript

http://wpphoto.it.att.com/cgi-bin/pix.pl?id=dj6942