JSFiddle - React, Tailwind, and code Playground
by Lalji Tadhani
HTML
<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans:wght@400;500;700&display=swap');
* {
margin: 0 auto;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navbar {
background-color: black;
color: white;
position: fixed;
width: 100%;
padding: 20px;
z-index: 9999;
}
#page-container {
position: relative;
width: auto;
}
header img {
width: 20%;
height: 20%;
}
li.navigation {
display: inline-block;
padding: 3px 5px;
}
#outer {
position: relative;
}
#inner {
position: absolute;
margin: auto;
float: right;
background-color: burlywood;
text-align: center;
padding: 20px;
top: 350px;
left: 50px;
}
p.tiles {
color: black;
}
.container {
width: 100%;
text-align: center;
display: block;
padding-top: 20px;
}
.tiles {
border-radius: 10px;
display: inline-block;
width: 20%;
padding: 20px 50px;
margin: 20px;
border: 1px solid black;
background-color: white;
color: black;
}
#footer {
position: static;
right: 0;
bottom: 0;
left: 0;
padding: 1rem 5rem;
margin: 0 auto;
height: 24%;
background-color: black;
color: white;
text-align: left;
display: block;
}
.footer-links {
display: block;
list-style: none;
}
ul.footer-links {
line-height: 150%;
}
.inner-footer-container {
padding: 5px 0;
margin: 0 auto;
display: inline;
margin-right: 50px;
}
...