JSFiddle - React, Tailwind, and code Playground

by Jhunlio Crodua

HTML

<div class="wrap">
<h1 id="selectBox">Service you&#39;re interested in</h1>
			  <div class="selectBox">
			    <div class="selectBoxWrap">
                              <ul class="selectBoxContent">
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span class="innerPageSelect">Website Design and Development</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Maintenance</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Web Rescue / Redesign</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Domain Name Registration</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Internet Programming</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Ecommerce Gateway Integration</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Email Newsletter Management</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Site Hosting and Management</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Search Engine Optimisation</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Traffic Promotion</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Submission To Search Engines</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Secure Certificates</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Screen Animations (Jquery)</span></li>
         ...

CSS

.wrap {
    float:left;
    width:300px;
}
#selectBox {
  color:#555;
  float:left;
  width:227px;
  padding:11px 13px 13px 13px;
  background-image:url(images/select.gif);
  background-repeat:no-repeat;
  font-family: 'Source Sans Pro', sans-serif !important;
  font-weight:normal !important;
  font-size:16px !important;
    border:1px solid red;
}

.selectBox {
  float:left !important;
  font-size:16px;
  width:252px;
  position:relative;
    left:0;
  bottom:4px;

}
.selectBoxWrap {
  float:left;
  z-index:99;
  position:absolute;
  padding:0 !important;
  margin:0 !important;
  background-color:transparent !important;
  background-color: rgba(0,0,0,0);
  padding:0 !important
}

.selectBox ul {
  display:none;
  padding:0 !important;
  margin:0 !important;
}
.selectBox li {
  float:left;
  background-color:#fff;
  padding:5px 5px 5px 10px !important;
  width:237px;
}
.selectBox li:hover {
  background-color:#555;
}
.selectBox li.other {
  padding:0 0 !important;
  width:252px;
  background-color:#e0e0e0;
}

.selectBox li.last {
  width:237px;
  -moz-border-radius: 0px 0px 5px 5px;
        -webkit-border-radius: 0px 0px 5px 5px;
        border-radius: 0px 0px 5px 5px;
}
.selectBox li.other:hover {
  background-color:#e0e0e0;
}


.selectBox li:hover span {
  color:#fff;
}
.selectBox li span {
  font-size:13px;
  color:#555;
}

JavaScript

$(function() {

            $('#selectBox').click(function() {
	    $('.selectBoxContent').slideToggle('fast');
	    return false;

	});
        });

$(document).click(function() {
     $('.selectBoxContent').slideUp('fast');
});

$(".selectBoxContent").click(function(e) {
    e.stopPropagation(); });