JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<div class="did-you-know">

    <h1>Did you know that 67% of you haven't completed a nomination form in the last 3 years?</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet ligula quis odio dictum rhoncus. Donec id malesuada nibh. Mauris imperdiet viverra mattis. Quisque sagittis est id aliquet pretium. Suspendisse potenti. Phasellus pellentesque, ex nec finibus consectetur, est odio facilisis dolor, et convallis sapien diam vitae neque. Aliquam vel lacus a massa tristique consequat. Nullam nisi libero, scelerisque sed sem eu, luctus laoreet velit. Sed a ante ut felis pretium malesuada. Pellentesque vitae purus at dui malesuada pulvinar et a orci.</p>
    
    <div class="content-link">
      <p>
        <a href="http://www.google.com/">
          It only takes <strong>5 minutes</strong> so why not download the form today &gt;&gt;
        </a>
      </p>
    </div>

</div>

CSS

body {
  font-family: arial;
}

.did-you-know {
  margin-bottom: 20px;
  padding: 1.5em 1.5em 1.5em 6em;
  background: #f9dccc url('imgs/bulb-orange.png') no-repeat 1.5em 1.5em;
}

.did-you-know h1 {
  font-size: 1.5em;
  font-weight: lighter;
  color: #e35000;
}

.did-you-know a {
  color: #e35000;
  text-decoration: none;
  font-weight: bold;
}

.did-you-know b, .did-you-know strong {
  font-size: 1.4em;
}

.did-you-know .content-link {
  padding-bottom: 0.6em;
  background: url('imgs/document-ico.png');
  background-size: 62px auto;
  background-repeat: no-repeat;
  background-position: 35% 100%;
}