JSFiddle - React, Tailwind, and code Playground

Survey Questions

by Jennifer Perrin

HTML

<div class="top"></div>
<div class="content">
  <div class="poll">
    <div class="num">Q.1</div>
    <h2>In which of the following ways do you work with WordPress?</h2>
    <div class="choices">
    <div class="choice"><input type="checkbox" id="1"/><label for="1">Build/design and/or maintain websites or blogs for other people, companies, or organizations.</label></div>
    <div class="choice"><input type="checkbox" name="Develop or Customize themes." id="2" /><label for="2">Develop or customize themes.</label></div>
    </div>
    
    <div class="poll">
    <div class="num">Q.2</div>
    <h2>How would you describe the business of your typical client(s)?</h2>
    <div class="choices">
    <div class="choice"><input type="checkbox" id="3"/><label for="3">Small business</label></div>
    <div class="choice"><input type="checkbox" id="4"/><label for="4">Large business</label></div>
    </div>
      
      
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

body {
  background-color: #f7f8f7;
}

.top {
  width: 100%;
  height: 90px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  background-color: #dbdbdb;
  box-shadow: 0px -1px 1px #cccccc inset;
}

.content {
  width: 700px;
  margin: 0 auto;
  padding: 10px 40px;
  background-color: white;
}
.content .poll {
  position: relative;
  margin-top: 30px;
}
.content .poll .num {
  position: absolute;
  left: -40px;
  top: -5px;
  background: #eeeeee;
  color: #666666;
  padding: 3px 4px;
  font-size: 14px;
  box-shadow: -7px 0px 0px #dddddd;
}
.content .poll h2 {
  font-weight: 400;
  font-color: black;
  font-size: 23px;
}
.content .poll .choices {
  margin: 10px 0 0 0;
}
.content .poll .choices .choice {
  width: 100%;
  margin: 10px 0;
}
.content .poll .choices .choice label {
  color: #666666;
  font-size: 13px;
  margin-left: 5px;
}