JSFiddle - React, Tailwind, and code Playground

by sajeerali Arakka

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="main.css">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet">
</head>
<body>

 <h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>
  
<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>



</body>
</html>

CSS

body{
background: rgb(164,174,216);
background: -moz-linear-gradient(87deg, rgba(164,174,216,1) 0%, rgba(236,113,143,1) 100%);
background: -webkit-linear-gradient(87deg, rgba(164,174,216,1) 0%, rgba(236,113,143,1) 100%);
background: linear-gradient(87deg, rgba(164,174,216,1) 0%, rgba(236,113,143,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a4aed8",endColorstr="#ec718f",GradientType=1);
  font-family: 'Poppins', sans-serif;
}

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  width:100%;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

h2, p{
  text-align:center;
  margin:0;
  color:#fff;
}
p{
  margin-bottom:2rem;
}