JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "connect.php"></script>
<div class="pull">
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "topics";
// Create connection
$conn = new mysqli($hostname, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT title, description, count FROM relevant_topics";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<b>Title: </b>" . $row["title"]. " - Description: " . $row["description"]. " " . $row["count"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
<div class="card">
<h2>Health and Wellbeing</h2>
<p>Sometimes you just did too much sitting not enough jumping go go go.</p>
</div>
<div class="card">
<h2>Health and Wellbeing</h2>
<p>Sometimes you just did too much sitting not enough jumping go go go.</p>
</div>
<div class="card">
<h2>Health and Wellbeing</h2>
<p>Sometimes you just did too much sitting not enough jumping go go go.</p>
</div>
<div class="card">
<h2>Health and Wellbeing</h2>
<p>Sometimes you just did too much sitting not enough jumping go go go.</p>
</div>
</body>
</html>
CSS
body {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #ddd;
}
.pull {
background-color: #c41;
color: #fff;
font-family: sans-serif;
font-size: 1em;
line-height: 1.7em;
}
.card {
display: inline-block;
background-color: #fff;
float: left;
width: auto;
margin-top: 1.7em;
margin-left: 1.7em;
padding: 0.85em;
font-family: sans-serif;
-webkit-box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.5);
box-shadow: 4px 4px 3px 0px rgba(50, 50, 50, 0.5);
}