JSFiddle - React, Tailwind, and code Playground

by moosefetcher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="page">
  <div id="fb-user-research">
    <span class="fb-checkbox">
      <input id="fb-user-research-checkbox" type="checkbox" name="fb-checkbox"/>
      <label for="fb-user-research-checkbox" id="fb-visible-checkbox">
        <svg class="unchecked fa-square-0">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-square-o" />
        </svg>
        <svg class="checked fa-check-square">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-check-square" />
        </svg>
      </label>
    </span>
    <div id="fb-user-research-texts">
      <p>Placeholder text here</p>
      <p>Disclaimer here.</p>
    </div>
    <div class="clear"></div>
  </div>
</div>

CSS

.page {
  background-color: #000000;
  height: 400px;
  padding: 15px;
}

#fb-user-research {
        border-radius: 3px;
        border: 1px solid #333333;
        margin: 44px 0px 14px 0px;
        padding: 15px 15px;
    }

    #fb-user-research input {
        border-radius: 2px;
        background-color: #333333;
    }

    #fb-user-research input {
        float: left;
    }

    #fb-user-research #fb-user-research-texts {
        width: 90%;
        float: left;
    }

    #fb-user-research div p {
        margin-bottom: 4px;
    }

    #fb-user-research div p:first-child {
        color: #ffffff;
    }

    #fb-user-research div p:last-child {
        color: #888888;
        font-size: 0.75em;
    }
    .fb-checkbox {
            margin-right: 20px;
        }

        #fb-user-research #fb-user-research-texts {
            width: 85%;
            float: left;
        }
        .fb-checkbox > [type="checkbox"] {
        width: 0;
        height: 0;
        display: none;
        opacity: 0;
    }

    .fb-checkbox {
        position: relative;
        float: left;
        margin-right: 10px;
    }

    .fb-checkbox > input[type=checkbox]:checked ~  #fb-visible-checkbox .checked {
        display: inline-block;
        opacity: 1;
        color: #0099dd;
    }
    
    .fb-checkbox > input[type=checkbox]:checked ~  #fb-visible-checkbox .unchecked {
        display: none;
        opacity: 0;
    }

    #fb-visible-checkbox > svg {
        position: relative;
        top: 0px;
        left: 0px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        font-size: 18px;        
    }

    #fb-visible-checkbox .unchecked {
        background-color: grey;
        color: #ffffff;
    }

    #fb-visible-checkbox .checked {
        background-color: lightgrey;
        color: #0099dd;
        display: none;
        opacity: 0;
    }
    
    .clear {
      clear: both;
    }