JSFiddle - React, Tailwind, and code Playground

Resume Card Layout

by Jennifer Perrin

HTML

<div class="container">
  <div class="word_split wrapper">
  <span class="word word1"> Jennifer </span>
  <span class="word word2">Perrin</span>
  <span class="word word3">Personal</span>
  <span class="word word4">Details</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>
      HI! <br/> I AM..
   </div>
      
  <div class="bubble2">
     <span class="the-arrow2"></span>
    <img src="http://dribbble.s3.amazonaws.com/users/10958/screenshots/271458/librarian.jpg"/>
   </div>
  <div class="bubble3">
     <span class="the-arrow3"></span>
    NATIONALITY...<br/>
    LOCATION...<br/>
    BIRTHDAY...<br/>
    HOBBIES<br/>
    ETC...<br/>
    ETC...<br/>
   </div>
  <div class="bubble4">
     <span class="the-arrow4"></span>
    GRAPHIC DESIGNER 2005 - 2007<br/>
    Lorem Ipsum dolor sit amet. Lorem Ipsum dolor.<br/><br/>
    CREATIVE DIRECTOR 2008 - Current
    <br/>
    Lorem Ipsum dolor sit amet.
    
   </div>
  <div class="bubble5">
     <span class="the-arrow5"></span>
    HIGH SCHOOL<br/>
    Lorem Ipsum dolor sit amet<br/>
    May 2004, GPA 1.5<br/><br/>
    UNIVERSITY <br/>
    Lorem Ipsum dolor sit amet<br/>
    July 2007, GPA 1.5
    
   </div>
  <div class="bubble6">
     <span class="the-arrow6"></span>
    SOCIAL COMMITMENT<br/>
    ORGANIZATION<br/>
    CREATIVITY<br/>
    COMMUNICATION<br/>
    TEAMWORK<br/>
   </div>
  <div class="bubble7">
     <span class="the-arrow7"></span>
    PHOTOSHOP<br/>
    ILLUSTRATOR<br/>
    INDESIGN<br/>
    FLASH<br/>
    DREAMWEAVER<br/>
    XHTML/CSS<br/>
    JAVASCRIPT<br/>
   </div>
  <div class="bubble8">
   ...

CSS

@import url(http://fonts.googleapis.com/css?family=BenchNine:700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;

  /* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
  background: linear-gradient(left, #e7e7e7, #ffffff, #e7e7e7);
  /* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
  background: linear-gradient(to right, #e7e7e7, #ffffff, #e7e7e7);
}

.container {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 270px;
  margin: 50px auto;
  position: Relative;
}

.word {
  display: block;
  text-align: justify;
  font-family: "BenchNine";
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: 0px;
}

.word1, .word2 { color: #9bc5de; }
.word3, .word4 { color: #90b3c9; }
.word5, .word6 { color: #809bb0; }
.word7 { color: #6b7b8a; }
.word8, .word9 { color: #8b8091; }
.word10, .word11 { color: #b68fa2; }
.word12, .word13 { color: #d99ab5; }
.word1 { font-size: 5.4em; }
.word2 { font-size: 6.7em; }
.word3 { font-size: 4.8em; }
.word4 { font-size: 6.4em; }
.word5 { font-size: 3.8em; }
.word6 { font-size: 6em; }
.word7 { font-size: 4.5em; }
.word8 { font-size: 4.8em; }
.word9, .word11 { font-size: 7.9em; }
.word10 { font-size: 4.9em; }
.word12 { font-size: 8.2em; }
.word13 { font-size: 7.8em; }

.bubble1 { 
  height: 75px;
  width: 75px;
  padding: 20px;
  position: absolute;
  color: white;
  background-color: #99c5de;
  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: 0;
  left: -120px;
  padding: 10px;
  font-size: 1.5em;
  line-height: 1;
}

.bubble1 span.the-arrow1 {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 0px solid #99c5de;
 ...