JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.rugstudio.com/Shared/Themes/RugStudio2015/css/deputy.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<div class="container cv pad-t-40 no-pad-lr">
  
  <!-- Left Column -->
  <div class="col-md-4 matchHeight no-pad-lr gray"> 
    <div class="col-md-12 avatar">
      <img src="https://www.w3schools.com/howto/img_avatar.png">
    </div>
    <div class="col-md-12 bio pad-b-20">
      <div class="center">
        <h1 class="name">John Doe</h1>
        <hr>
        <h2>Web Developer</h2>
      </div>
      <div class="about m-t-50">
        <h3>About</h3>
        <div class="pad-l-30">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis dapibus augue at eleifend. Aenean volutpat purus nibh, quis ultricies tellus gravida vel. Donec dictum, massa ut accumsan feugiat, ex leo vestibulum odio, vitae accumsan metus ipsum quis mauris.</p>
          <p>Suspendisse sed porttitor nisl. Nunc tristique dapibus mi, nec mattis lectus interdum et. Nunc vitae feugiat dui, a dignissim erat. </p>
        </div>
      </div>
      <div class="contact m-t-30">
        <h3>Contact</h3>
        <div class="pad-l-30">
        <p><span class="glyphicon glyphicon-earphone circle" aria-hidden="true"></span> (555) 123-4567</p>
          
        <p class="m-t-20"><span class="glyphicon glyphicon-map-marker circle" aria-hidden="true"></span> 1234 Example Dr.<br><span class="m-l-50">My City, ST 12345</span></p>
          
        <p class="m-t-20"><span class="glyphicon glyphicon-envelope circle" aria-hidden="true"></span> [email protected]</p>
          
        <p class="m-t-20"><span...

CSS

.cv {
  border: 1px solid #000;
  box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4);
}

.avatar {
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#454545', GradientType=0);
  height: 300px;
  text-align: center;
}

.avatar img {
  padding: 5px;
  border-radius: 50%;
  margin-top: 25px;
  background: #fff;
  max-width:250px;
}

.gray {
  background: #454545;
}

.bio {
  background: #454545;
  color: #fff;
}

.bio hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}

.about h3,
.contact h3 {
  background-color: #4886a5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  color: #fff;
  font-size: 1.4em;
  margin: 0 0 24px 26px;
  padding: 4px 0 4px 12px;
  position: relative;
  width: 100%;
}

.about h3:after,
.contact h3:after {
  border-color: #263746 transparent transparent #263746;
  border-style: solid;
  border-width: 6px;
  bottom: -12px;
  content: "";
  position: absolute;
  right: 0;
}

.about h3:before,
.contact h3:before {
  color: #fff;
  content: "";
  font: 26px sans-serif;
  position: absolute;
  right: 12px;
  top: -2px;
}

.contact {
  font-size: 1.2em;
}

.circle {
  padding: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.experience .glyphicon,
.education .glyphicon,
.work-skills .glyphicon,
.personal-skills .glyphicon {
  font-size: 1.5em;
}

.experience hr,
.education hr,
.work-skills hr,
.personal-skills hr {
  border-top: 1px dashed #000;
}

.experience .date,
.education .date,
.work-skills .date,
,
.personal-skills .date {
  font-size: 1em;
}

.experience...

JavaScript

//Used for the Skills bar
$('.skills dd').each(function() {
  $(this).css({
    width: $(this).text() + '%'
  });
});

// matchHeight.js
$(function() {
 $('.matchHeight').matchHeight();
});