JSFiddle - React, Tailwind, and code Playground

by Husen

HTML

<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>

<div id="firstskin">
    <div id="topskin"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="secondskin">
    <div id="topskin2"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="thirdskin">
    <div id="topskin3"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="fourthskin">
    <div id="topskin4"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="fithskin">
    <div id="topskin5"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="sixskin">
    <div id="topskin6"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>


</div>

This is the third section to the index page.


</div>

CSS

#downloadbutton1 {
width:80%;
background-color:#003366;
border-radius: 2px;
color:white;
transition:200ms;
cursor:pointer;
}

#downloadbutton1:hover {
background-color:#336699;
transition:200ms;

}

#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin, #thirdskin, #fourthskin, #fithskin, #sixskin{
width:100px;
overflow:hidden;
float:left;
padding-left:10px;

}

#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
transition:150ms;
}


#topskin2 {
background-image:url(images/topskins/2f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin3 {
background-image:url(images/topskins/3f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin4 {
background-image:url(images/topskins/4f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin5 {
background-image:url(images/topskins/5f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin6 {
background-image:url(images/topskins/6f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;

}

#topskin:hover {
background-image:url(images/topskins/1b.png);
transition:150ms;

}

#topskin2:hover {
background-image:url(images/topskins/2b.png);
transition:150ms;

}

#topskin3:hover {
background-image:url(images/topskins/3b.png);
transition:150ms;

}

#topskin4:hover {
background-image:url(images/topskins/4b.png);
transition:150ms;

}

#topskin5:hover...