JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Source+Sans+Pro" rel="stylesheet">
<div class="description" style="font-family: 'Source Sans Pro', sans-serif;font-size: 3em;background: #fff;border: 1px solid #ddd;padding: 1.42857em;box-shadow: 10px 10px 30px -9px rgba(0, 0, 0, .4);transition: box-shadow 1s;text-align: center;">
  <img src="https://dl.dropboxusercontent.com/u/4488662/ebay/images/two-dollar-bill.jpg" alt="Two dollar bill" style="max-width: 100%;">
  <p class="green font-diploma-sc" style="color: #1E824C;font-family: 'Diplomata SC', cursive;">
    <!-- Edit the text below -->
    15 sequentially numbered $2 MONEY-CRISP BILLS
  </p>
  <p class="red" style="color: #F22613;">You are bidding on a pack of (15) Uncirculated and Consecutive $2 US Federal Reserve Notes</p>
  <p class="white" style="background: #666;padding: 20px;color: #fff;">All notes are sequentially numbered and in uncirculated condition. A limited number of additional bricks are available on request.
  </p>
  <p class="green font-diploma-sc" style="color: #1E824C; font-family: 'Diplomata SC', cursive;">THE BILLS ARE IN SEQUENCE AS WELL, MEANING 15 NUMBERS IN A ROW.</p>
  <p class="blue" style="color: #4183D7;">These notes are guaranteed authentic and have never been placed in circulation. They are straight off the printing machines into your hands. The notes you see represent exactly the type of notes you will receive. These packs would make a great gift or addition to a paper money collection. If you have any questions, please let me know. Good luck, thank you, and happy bidding! :-)</p>
    <!-- End of Text Editing -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Fed_Reserve_Bank_of_SF_entrance.JPG" alt="American Flag" style="max-width: 100%;">
  <img src="http://bestanimations.com/Flags/USA/usa-american-flag-waving-animated-gif-26.gif" alt="American Flag Waving" style="max-width: 100%;">
</div>

CSS

/*
.description {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  background: #fff;
  border: 1px solid #ddd;
  padding: 1.42857em;
  box-shadow: 10px 10px 30px -9px rgba(0, 0, 0, .4);
  transition: box-shadow 1s;
  text-align: center;
}

.description img {
  max-width: 100%;
}

.green {
  color: #1E824C;
}

.red {
  color: #F22613;
}

.white {
  background: #666;
  padding: 20px;
  color: #fff;
}

.blue {
  color: #4183D7;
}

.font-diploma-sc {
  font-family: 'Diplomata SC', cursive;
}