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

.holder {
	opacity:0;
	width:100%;
	height:10px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	margin-top:10px;
	padding-top:20px;
	margin-left: auto;
    margin-right: auto;
	text-align:center;
}

.ref {
	position:relative;
	width:800px;
	margin-left: auto ;
    margin-right: auto ;
	text-align:left;
}

JavaScript

$( window ).resize(function() {
	if($(window).width() < 480)
	{
		$('.holder').css('width', $(window).width()-7);
		$('.multi').css('left',0);
		$('.music').css('left',0);
		$('.holder').css('height','420');
		$('.ref').css('margin-top',$('.holder').height() -400);
		
	}