JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="shortcut icon" href="img/fav.png">

<meta name="author" content="codepixer">

<meta name="description" content="">

<meta name="keywords" content="">

<meta charset="UTF-8">

<title>Appru</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600|Roboto:400,400i,500" rel="stylesheet">

<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/linearicons.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/font-awesome.min.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/bootstrap.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/magnific-popup.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/nice-select.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/hexagons.min.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/owl.carousel.css">
<link rel="stylesheet" href="https://preview.colorlib.com/theme/appru/css/main.css">
</head>
<body>

<header id="header">
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<div id="logo">
<a href="index.html"><img src="img/logo.png" alt="" title="" /></a>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active"><a href="index.html">Home</a></li>


<li><a href="http://tus-news.com/">Pricing</a></li>


</ul>
</nav>
</div>
</div>
</header>


<section class="home-banner-area">
<div class="container">
<div class="row fullscreen d-flex align-items-center justify-content-between">
<div class="home-banner-content col-lg-6 col-md-6">
<h1>
App That <br> Suits You Better
</h1>
<p>Bringing you Local News as fast as possible in Tus Area</p>
<div class="download-button d-flex flex-row...