JSFiddle - React, Tailwind, and code Playground

by Jordan Hawker

HTML

<script src="//use.typekit.net/rzv2mwh.js"></script>
<script>try{Typekit.load();}catch(e){}</script>


<div class="container">
  <h1>Recreate this using HTML &amp; CSS</h1>
  
  <div class="panel">
    <div class="progress-info">  
      $167 still needed for this project
    </div>
    <div class="progress-wrap">
     
    </div>
    
    <div class="info-content">
       
      <p class="lead"><span class="secondary">Only 3 days left</span> to fund this project.</p>
      
      <p>Join the <span>42</span> other donors who have already supported this project. Every dollar helps.</p>
      
      <form class="donate">
        <input placeholder="$">
        <button>
          Give Now
        </button>
      </form>
      <a href="#">Why give $5? </a> 
      
    </div>
    
    <div class="two-up">
      <div class="button primary">
        Save for later
      </div>
      <div class="button primary">
       Tell your friends
      </div>
    </div>
    
    </div>
  </div>
  
  <img src="https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png" width="303" />
 
  
  <!--Your HTML goes here-->
  
  
  
</div>

CSS

/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; line-height: 1.4; font-size: 0.8rem}

/* Fonts */
h1 {
  font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
  font-size: 2.5em;
  font-weight: bold;
}

.container {
  margin: 2em auto;
  max-width: 630px;
}

/* COLORS: 
  blue: #20A1D4;
  green: #1CBC2C;
  orange: #EF5F3C;
  black: #424242;
  grey: #777;
  light grey: #eaeaea;
*/

/* Your CSS goes here */

.panel {
  width: 305px;
  background: white;
  padding: 20px 30px;
}

.progress-wrap {
  position:relative;
  width:100%;
  height:15px;
  border: 1px solid  #eaeaea;
  overflow:hidden;
}
.progress-wrap:after {
  background: #EF5F3C;
  height: 15px;
  width: 75%;
}

.progress-info {
  background-color: #424242;
  padding: 15px;
  text-align:center;
  width: 100%;
  margin-bottom: 12px;
  color: #FFF;    
}

.secondary {
  color:#EF5F3C;
  font-weight: bold;
}

.info-content p {
  line-height: 1.2rem;
}

.lead {
  margin-bottom:20px;
}


.donate input, .donate button {
  width:40%;
  display:inline-block;
}

.donate input { 
 padding: 12px 5px;
 font-size: 1.2rem;
}