JSFiddle - React, Tailwind, and code Playground

by Trifan Alexandru

HTML

<div class="tracking-wrapper">
  <div class="general-overview">
    <div class="category DEFAULT">
     <div class="description">
          Domain Validated
        </div>
      <div class="circle">
        <div class="inner-circle">
        </div>
        <div class="icon">
          <img src="http://www.pomaz.hu/container/news/info_i_blue_svg_1464700954.png"/>
        </div>
       
      </div>
      <div class="lastUpdated">
        Last update: 30/12/1989
      </div>
    </div>
    <div class="category WARNING">
    <div class="description">
          Organization Validated
        </div>
      <div class="circle">
        <div class="inner-circle">
        </div>
        <div class="icon">
            <img src="https://cdn0.iconfinder.com/data/icons/social-messaging-ui-color-shapes/128/alert-triangle-yellow-128.png"/>
        </div>
        
      </div>
      <div class="lastUpdated">
        Last update: 30/12/1990
      </div>
    </div>
    <div class="category ERROR">
    <div class="description">
          Phone Validated
        </div>
      <div class="circle">
        <div class="inner-circle">
        </div>
        <div class="icon">
            <img src="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/mail-delete.png"/>
        </div>
        
      </div>
      <div class="lastUpdated">
        Last update: 30/12/1991
      </div>
    </div>
    <div class="category OK">
     <div class="description">
          Something
        </div>
      <div class="circle">
        <div class="inner-circle">
        </div>
        <div class="icon">
            <img src="https://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_34.png"/>
        </div>
       
      </div>
      <div class="lastUpdated">
        Last update: 30/12/1991
      </div>
    </div>
  </div>
  <div class="tracking-messages">
    <div class="title">
      Tracking Messages
    </div>
    <div class="container">
      <div class="message-container">
        <div...

CSS

body {
  background-color: #ffffff;
}

.general-overview {
  overflow: hidden;
  padding: 10px;
  margin-bottom: 10px;
}
.circle {
  overflow: hidden;
  z-index: 4;
  position: relative;
  border-radius: 120px;
  -moz-border-radius: 120px;
  -webkit-border-radius: 120px;
  -ms-border-radius: 120px;
  width: 120px;
  height: 120px;
  //border: 1px dotted;
  top: -4px;
}

.inner-circle {
  background: transparent;
  position: relative;
  border-radius: 90px;
  -moz-border-radius: 90px;
  -webkit-border-radius: 90px;
  -ms-border-radius: 90px;
  width: 80px;
  height: 80px;
  //border: 1px solid;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  background-color: #fff;
  z-index: 40;
}

.inner-circle p {
  overflow: hidden;
  text-align: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -30px;
  margin-top: -20px;
}

.lastUpdated {
  width: 120px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
}

.category {
  cursor: pointer;
  float: left;
  margin-left: 10px;
}

.category.DEFAULT .circle {
  background-color: #0e87e3;
}

.category.WARNING .circle {
  background-color: #f8c901;
}

.category.ERROR .circle {
  background-color: #dd5555;
}

.category.OK .circle {
  background-color: rgb(56, 200, 0);
}

.icon {
  width: 45px;
  height: 45px;
  z-index: 42;
  position: absolute;
  left: 50%;
  margin-left: -24px;
  margin-top: -4px;
}

.icon img {
  width: 100%;
  height: 100%;
}

.description {
  position: relative;
  text-align: center;
  overflow: hidden;
  color: #004192;
  font-weight: bold;
  width: 120px;
  padding-bottom: 5px;
  height: 40px;
}


.tracking-messages {
  width: 600px;
  height: 600px;
  overflow: hidden;
  padding: 10px;
}

.tracking-messages .container {
  height: 90%;
  padding: 10px;
  overflow-y: auto;
  background-color: #fff;
}

.tracking-messages .title {
  font-weight: bold;
  color: #004192;
  font-size: 20px;
}

.tracking-messages...