JSFiddle - React, Tailwind, and code Playground
by dev2804
HTML
<HTML>
<HEAD>
<TITLE>Currency Converter Protype4</TITLE>
</HEAD>
<BODY>
<Style>
body {
background-image: url(https://lh4.googleusercontent.com/-XplyTa1Za-I/VMSgIyAYkHI/AAAAAAAADxM/oL-rD6VP4ts/w1184-h666/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
}
table{
border-collapse: collapse;
width: 360px;
height: 370px;
border-radius: 5px;
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -185px;
margin-left: -180px;
}
.RowDesign{
height: 80px;
background-color: #ccffff;
border: 10px solid #b3b3ff;
border-radius: 5px;
}
.container{
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -200px;
margin-left: -190px;
width: 380px;
height:400px;
background-color: #b3b3ff;
border: 3px solid #b3b3ff;
border-radius: 5px;
}
.CountryName{
padding-left: 8px;
padding-right: 18px;
padding-top: 5px;
text-align: center;
}
.ImgText{
width: 70px;
height: 45px;
border: 1px solid #fff;
}
.Country{
height: 30px;
width: 175px;
padding-left: 20px;
border: 2px solid #0066ff;
border-radius: 15px;
}
.Country:hover{
background-color: #e6e6ff;
}
.CountryText{
vertical-align: center;
visibility: hidden;
font-weight: Bold;
color: #3d2263;
}
.ImgText:hover ~ .CountryText{
visibility: visible;
}
input:focus {
background-color: #e6e6ff;
}
</Style>
<Section class="container">
<Table>
<tr class="RowDesign">
<td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Flag_of_Australia_%28converted%29.svg/1600px-Flag_of_Australia_%28converted%29.svg.png"...