JSFiddle - React, Tailwind, and code Playground

by Jitendra Zaa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12 text-center"> 
    <img class="img-circle" src="https://trailhead-web.s3.amazonaws.com/uploads/users/5568734/photos/thumb_634f50ba64d83c0371fd5f06b614d445f997ba29c3e00e3d742673d4a7493e50.jpg?updatedAt=20171220085712" alt="Thumb 634f50ba64d83c0371fd5f06b614d445f997ba29c3e00e3d742673d4a7493e50" width="155" height="155"> 
  
  </div>
  <div class="col-md-8 col-lg-4  col-sm-12 col-xs-12 text-center">
    <h1 data-test-user-name="true" data-reactid="2" >Jitendra Zaa</h1>  
    <div class="row">
      <p class="pull-left">
        <h3 data-test-user-achievements="" > Achievements</h3>
      </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-lg-4  col-sm-12 col-xs-12 text-center"> 
    <a class="slds-show slds-text-align_center" data-test-current-rank href="/en/trailblazer-ranks"> <img width="100px" src="https://trailhead.salesforce.com/assets/ranks/ranger-c52b81631f16e35fe619b58215db59f7be4d8809acd253606ad9701186bba218.png" alt="Ranger" class="img-circle"></a> 
  </div>
  <div class="col-md-8 col-lg-4  col-sm-12 col-xs-12">
    
    <div class="row">
      <div class="col-md-4 col-lg-4  col-sm-4 col-xs-12 text-center"> BADGE </div>
      <div class="col-md-4 col-lg-4  col-sm-4 col-xs-12 text-center">POINT</div>
      <div class="col-md-4 col-lg-4  col-sm-4 col-xs-12 text-center">TRAIL</div>
    </div>
  </div>
</div>