JSFiddle - React, Tailwind, and code Playground

by goodfriend

HTML

<div id="super-footer">
    <div class="linksbox2">
                    <p><a href="/"><strong>Home</strong></a></p>
                    <p><a href="/gold-coast-attractions"><strong>Gold Coast Attractions</strong></a></p>
                    <p><a href="/surfers-paradise-attractions"><strong>Surfers Paradise Attractions</strong></a></p>
                    <p><a href="/information/contact-us"><strong>Contact</strong></a></p>
                </div>
                <div class="linksbox">
                    <p><strong>Accommodation</strong></p>
                    <ul class="footerlinks">
                        <li><a href="/accommodation/apartments">Apartments</a></li>
                        <li><a href="/accommodation/hotels">Hotels</a></li>
                        <li><a href="/accommodation/motels">Motels</a></li>
			<li><a href="/accommodation/resorts">Resorts</a></li>
			<li><a href="/accommodation/retreats">Retreats</a></li>
                    </ul>
                </div>
                <div class="linksbox">
                  	<p><strong>Theme Parks</strong></p>
                  	<ul class="footerlinks">
                      <li><a href="/theme-parks/movie-world">Movie World</a></li>
                      <li><a href="/theme-parks/dreamworld">Dreamworld</a></li>
                      <li><a href="/theme-parks/seaworld">Seaworld</a></li>
                      <li><a href="/theme-parks/wet-n-wild">Wet n Wild</a></li>
                      <li><a href="/theme-parks/white-water-world">White Water World</a></li>
                  	</ul>
                </div>
                <div class="linksbox">
                  	<p><strong>Attractions</strong></p>
                  	<ul class="footerlinks">
                      <li><a href="/gold-coast-attractions/australian-outback-spectacular">Australian Outback Spectacular</a></li>
                      <li><a href="/surfers-paradise-attractions/infinity-gold-coast-attraction">Infinity</a></li>
                    ...

CSS

body { text-align: center; line-height: 21px; font-family: 'Droid Sans', Arial, Verdana, sans-serif; font-size: 12px; color: #828282; min-height: 25px; background: #f6f6f6 url(images/body-bg.jpg); vertical-align:middle; }

a { text-decoration: none; color: #0a529e; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }

#super-footer {

    width: 75%; position: relative;
    background-color:#176ca5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px 10px 10px 250px;
    height:auto; min-height:200px;
    margin:25px 0 10px 0;
    float:left; 
    background-image:url('http://demo.nextsyntax.com/goldcoast/wp-content/themes/ElegantEstate/images/footer-bg.png');
    background-repeat:no-repeat;
    background-position: 25px 30px;
    -moz-box-shadow:    2px 3px 5px 1px #ccc;
    -webkit-box-shadow: 2px 3px 5px 1px #ccc;
    box-shadow:         2px 3px 5px 1px #ccc;
    vertical-align:middle;
}
.linksbox {

	width:150px;

	float:left;

	margin-right:10px;

}



.linksbox p {

	color:#FFF;

}



.linksbox2 {

	width:100px;

	float:left;

	margin-right:10px;

}



.linksbox ul {

	padding:0;

	margin:0;

}



.linksbox ul li {

	padding:0 0 0 20px;

	margin:0 0 5px 0;

	background-image:url('images/bullet.png');

	background-repeat:no-repeat;

	background-position: left top;

}



.linksbox ul li a {

 color:#e6eaee;

 text-decoration:none;

}



.linksbox ul li a:hover {

	text-decoration:underline;

}



.social {

    color: #959595;

    display: block;

    float: left;

    padding: 10px 0;

    width: 225px;

}



.social div {

    display: block;

    overflow: hidden;

}



.social div a {

    background-image: url("images/social-media-icons.png");

    background-repeat: no-repeat;

    display: block;

    float: right;

    height: 32px;

    margin: 0 0 0 5px;

    overflow: hidden;

    text-indent: -9999px;

   ...