JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<div class="contact">
  <span class="close-icon">&times;</span>
  <div class="contact-img">
    <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="contact image" />
  </div>
  <div class="contact-details">
    <h5>contact full name</h5>
    <p class="contact-email"><label>e-mail</label><span>[email protected]</span></p>
    <p class="phone"><label>phone</label><span>+9191919191</span></p>
    <p class="street"><label>street</label><span>1-lskjdflskdjflksdj</span></p>
    <p class="city"><label>city</label><span>ams</span></p>
    <p class="state"><label>state</label><span>nl</span></p>
    <p class="postcode"><label>postcode</label><span>11ksk2</span></p>
  </div>
  <div class="contact-user-name">
    asdfs
  </div>
</div>

CSS

h5,
p {
  margin: 0;
  padding: 0;
}

  .contact {
    position: relative;
    padding: 20px;
    border: 1px solid #ccc;
  }

  .contact .close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .contact .contact-img {
    float: left;
    margin-right: 20px;
  }

  .contact .contact-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .contact .contact-details {
    float: left;
  }

  .contact .contact-details p>label {
    width: 100px;
    display: inline-block;
    float: left;
    text-align: left;
  }

  .contact .contact-user-name {
    clear: both;
  }