JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zelda Mini-wiki</title>
<meta name="description" content="This mini guide will cover all of the important facts and aspects of The Legend of Zelda franchise. Not as big as the full wiki, but still powerful enough to get the job done.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="p-5 header-custom text-white text-center">
<h1 class="header-heading-text"> Top 10 Zelda Bosses
(In my opinion)</h1>
<p>Please don't come after me!</p>
</div>
<!--Main container-->
<div class="p-5 container-fluid main-container-color">
<div class="row text-center">
<div class="col-lg-4 col-md-6">
<div class="card" style="width:400px">
<img class="card-img-top" src="images/koloktos_image.webp" alt="" style="width:100%">
<div class="card-body">
<h4 class="card-title">Koloktos</h4>
<button type="button" class="btn mod-button" data-bs-toggle="modal" data-bs-target="myModal">
More Info
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Must stay at the end of the body tag -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
CSS
.header-custom {
background-color: #bea925;
}
.header-heading-text {
font-weight: bold;
}
.main-container-color {
background-color: #2596be;
}
/* Modal Stuff */
.mod-button {
background-color: #6c25be !important;
}