JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<div class='holder'>
    	<div class='mainimage'></div>
    	<div class='multi'>Multimedia
        	<!--<a = href="http://google.com">Multimedia
            	<span class="underlink"></span>
         	</a> -->
         </div>
         <div class='music'>
         	<a = href="http://thoughtrender.com/music">Record Label
            	<span class="underlink"></span>
         	</a>
         </div>
        <div class='ref'>
			<a href="mailto:[email protected]">[email protected]</a>
		</div>
    </div>

CSS

html, body {
  	height: 95%;
  	width: 95%;
  	padding: 0;
  	margin: 0;
 	background: black url(http://thoughtrender.com/new/images/home_bk_sm.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.mainimage {
	width:300px;
	height:300px;
	display:block;
	background-image: url(http://thoughtrender.com/new/images/logo_thr_circle.png);
	background-repeat: no-repeat; 
	background-position:center top;
	background-size:contain;
}

.holder {
	position:absolute;
	opacity:1;
	width:98%;
	height:10px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	margin-top:10px;
	padding-top:20px;
	text-align:center;
}

.multi {
	position:static;
	opacity:0.5;
	width:400px;
	height:50px;
	right:0;
	left:0;
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	font-size:26px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	vertical-align:middle;
	line-height:50px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	
}

.music {
	position:static;
	opacity:1;
	width:400px;
	height:50px;
	right:0;
	left:0;
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	font-size:26px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	vertical-align:middle;
	line-height:50px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
}