JSFiddle - React, Tailwind, and code Playground

by Kyle Vassella

HTML

<!doctype html>

      <base href="/">

      <title>Test</title>


      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>

      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
 
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">

      <!-- HEADER -->
        <header> <img src="images/trolltunga.jpg" id="header-image" alt="Header">  </header>
        <nav class="navbar navbar-inverse">
    <!-- ANGULAR HANDLES THE ROUTING HERE -->
          <ul class="nav navbar-nav">
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Pradžia</div> <div class="navbar-button-description">apie viską trumpai</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Pradedantiems Verslą</div> <div class="navbar-button-description">sklandžiai</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Buhalterinė Apskaita</div> <div class="navbar-button-description">Pagal mus</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Mokesčių Optimizavimas</div> <div class="navbar-button-description">tekstas</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Verslo Procesai</div> <div class="navbar-button-description">tekstas</div></div></a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Apie Sudėtingus Dalykus Paprastai</div> <div class="navbar-button-description">klauskite</div></div> </a></li>
             <li><a href="/"><div class="navbar-button"><div class="navbar-button-name">Kainos</div> <div...

CSS

#header-image{
  display:block;
  margin:auto;
}
.navbar-button{
  position: relative;
  border-style: solid;
  background-color: teal;
  width: 8vw;
  height: 14vh;
}
.navbar-button-name{
  margin-top:15%;
  font-weight: bold;
  text-align: center;
  color: blue;
}
.navbar-button-description{
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: center;
  text-decoration: underline;
  text-align: center;
  color: blue;
  display: flex;
  justify-content: center;
  align-items: flex-end;

}

.nav.navbar-nav{
  background-color: white;
  border-style: none;
}
.nav{
  width:100%;
  border-style: none;
}

.rounded-div{
  border-radius:100%;
  border: 2px solid #73AD21;
  height: 100px;
  width: 100px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-view{
  height: 110px;
}