JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<nav class="navigation">
  <input type="checkbox" id="more" aria-hidden="true" tabindex="-1" class="toggle"/>
  <div class="navigation__inner">

<div class="navigation__logo">  <ul>
    <li>
      <a href="#">Bridging Loans</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
  </ul>
</div>



   
    
    <ul class="navigation__list">

      <li class="navigation__item"><a href="#" class="navigation__link">Development Finance</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Case Studies</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Testimonials</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">About Us</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Contact Us</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Calculators</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Commercial Mortgages</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Commercial Finance</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Secured Loans</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Equity Release</a></li>
    </ul>
    <div class="navigation__toggle">
      <label for="more" aria-hidden="true" class="navigation__link">More</label>
    </div>

       
  </div>
   
</nav>

CSS

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: #e6e6e6;
	font-family: Helvetica, Arial, sans-serif;
}
.navigation {
	width: 100%;
	border-bottom: 1px solid #ccc;
	background: #fff;
	height: 50px /* Collapsed navigation height */;
}
.navigation__inner {
	display: flex;
	max-width: 1000px;
	height: 50px /* Collapsed navigation height */;
	margin: 0 auto;
	overflow: hidden;
}
.toggle:checked ~ .navigation__inner {
	height: auto /* Full height when more is toggled */;
}
.navigation__link {
	display: block;
	padding: 0 20px;
	font-size: 14px;
	line-height: 50px /* Collapsed navigation height */;
	text-decoration: none;
	color: #000;
	cursor: pointer;
}
.navigation__link:hover {
	text-decoration: underline;
}
.navigation__logo {
	flex-shrink: 0 /* Stops logo collapsing */;
	align-self: flex-start /* Stops logo stretching with list */;
	border-left: 1px solid #ccc;
}
.navigation__logo .navigation__link {
	font-weight: bold;
}
.navigation__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	border-right: 0;
}
@media screen and (max-width: 400px) {
	.navigation__item {
		flex-basis: 100% /* Stops uneven wrapping */;
	}
}
.navigation__toggle {
	flex-shrink: 0 /* Stops more button collapsing */;
	background: #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.navigation__toggle .navigation__link {
	position: relative;
	padding-right: 50px;
}
/* More button arrow */
.navigation__toggle .navigation__link:after {
	content: '';
	position: absolute;
	top: 22px;
	right: 20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #000 transparent transparent transparent;
}
/* Flip the arrow when toggled */
.toggle:checked ~ .navigation__inner .navigation__toggle .navigation__link:after {
	border-width: 0 5px 5px 5px;
	border-color: transparent transparent #000 transparent;
}
/* Hide the checkbox */
.toggle...