JSFiddle - React, Tailwind, and code Playground
by David Kyle
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<section class="body">
<nav class="primary-nav">
<ul class="red-text">
<li class="bold"><a href="https://www.google.com" target="_blank" style="color: orange;"><i class="fas fa-home"></i>Google</a></li>
<li><a href="https://yahoo.com" target="_blank"><i class="fas fa-pencil"></i>Yahoo</a></li>
</ul>
</nav>
<h1>
Home
</h1>
<p>
Welcome to my site.
<i>This will change your life</i>
</p>
</section>
<footer>Copyright © 2024 Us. All rights reserved</footer>
CSS
li:nth-child(1) i {
margin-right: 1rem;
color: #00ff00;
}
li:nth-child(1) i:before {
content: 'Hi'
}
.red-text {
color: red;
}
.red-text a {
color: red;
}
.bold {
font-weight: bold;
}
JavaScript
let a = 0;
let b = undefined;
alert(a == b);