JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<div class="container">
   <div class="word_split wrapper">
 <span class="word word1">Justin</span>
  <span class="word word2">Winter</span>
  <span class="word word3">Back</span>
  <span class="word word4">Ground</span>
  <span class="word word5">Employment</span>
  <span class="word word6">History</span>
  <span class="word word7">Education</span>
  <span class="word word8">Personal</span>
  <span class="word word9">Skills</span>
  <span class="word word10">Technical</span>
  <span class="word word11">Skills</span>
  <span class="word word12">Get In</span>
  <span class="word word13">Touch</span>
  
  <div class="bubble1">
     <span class="the-arrow1"></span>
      Hello!<br>I am..
   </div>
  <div class="bubble2">
     <span class="the-arrow2"></span>
    <img src="https://www.dl.dropboxusercontent.com/s/fct5incci4018y0/Picture1.png"/>
   </div>
   <div class="bubble3">
     <span class="the-arrow3"></span>
    I am fast-thinking professional with extensive experience in office administration, office logisitics, management, and Human Resources. I am dedicated, loyal, hard-working, and pride myself in my ability to think on my feet to solve complex problems in unique and different ways.
</div>
    <div class="bubble4">
     <span class="the-arrow4"></span>
      <label class="btn" for="modal-1">Senior Human Resources Administrator</label><br>Lyles Services Co.<br>May 2016 - Present<br>
   <input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label> 
          <h2>Job Function</h2>
      <p>As a member of the Human Resources team, this position is responsible to plan, develop, manage and coordinate assigned program responsibilities; conduct research, analyze and prepare reports, and provide management level support to the Director of Human Resources. Additionally, this role will be responsible for recommending...

CSS

@import url(https://fonts.googleapis.com/css?family=BenchNine:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
.container {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 270px;
  top: 25px;
  margin-left: auto;
  margin-right: auto;
  position: Relative;
}


a:link {
text-decoration: none;
color:white;
}
a:visited{
color:white;
}

.word {
  display: block;
  text-align: Center;
  font-family: "BenchNine";
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: 0px;
}
.word1,
.word2 {
  color: #404040;
}
.word3,
.word4 {
  color: #595959;
}
.word5,
.word6 {
  color: #808080;
}
.word7 {
  color: #999999;
}
.word8,
.word9 {
  color: #737373;
}
.word10,
.word11 {
  color: #595959;
}
.word12,
.word13 {
  color: #333333;
}
.word1 {
  font-size: 6.3em;
  letter-spacing: .09em;
}
.word2 {
  font-size: 6.3em;
  letter-spacing: .04em;
}
.word3 {
   font-size: 4.5em;
   letter-spacing: 46px;
   margin-left: 6px;
}
.word4 {
  font-size: 6.4em;
  letter-spacing: -1.5px;
}
.word5 {
  font-size: 3.8em;
  letter-spacing: 1px;
}
.word6 {
  font-size: 6em;
  letter-spacing: 2px;
}
.word7 {
  font-size: 4.5em;
  letter-spacing: 2px;
}
.word8 {
  font-size: 4.8em;
   letter-spacing: 3px;
}
.word9 {
  font-size: 7.9em;
 letter-spacing: 4.2px;
}
.word10 {
  font-size: 4.9em;
  letter-spacing: 2px;
}
.word11 {
  font-size: 7.9em;
  letter-spacing: 4.2px;
}
.word12 {
  font-size: 7em;
  letter-spacing: 8px;
}
.word13 {
  font-size: 7em;
  letter-spacing: 5px;
  margin-left: 5px;
}

.bubble1 {
  height: 75px;
  width: 100px;
  position: absolute;
  color: white;
  background-color: #404040;
  font-family: "Open Sans Condensed";
  border-top-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 20px;
  top: -20px;
  left: -127px;
  letter-spacing: 3px;
  text-align: center;
  padding: 10px 5px 5px 5px;
  font-size: 2em;
  line-height: 1;
}
.bubble1 span.the-arrow1 {
  display:...