JSFiddle - React, Tailwind, and code Playground

by Maja Mladenovi

HTML

<div class="navigacija">
		<div class="orodja">
			<span>Gmail</span>
			<span>Images</span>
		</div>
	</div>
  
		<div class="sredina">
			<h1>
      <span class="m">B</span><span class="c">O</span><span class="o">O</span><span class="g">G</span><span class="p">L</span>E
			</h1>
			<input placeholder="isci"> 
			<div class="gumbi">
				<button type="button">Click Me</button>
				<button type="button">Click Me</button>
			</div>
		</div>

	<div class="noga">
	  <span class="levo">Levo</span>
	  <span class="desno">Desno</span>
	</div>

CSS

.navigacija {
			background-color: white;
			height: 30px;
			width: auto;
			margin-bottom: 20px;
		}

		.orodja {
			float: right;
		}

		.sredina {
			width: 180px;
			margin: 10px auto;	
      border: 0px solid white;
     
		}

		.footer {
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  padding: 10px;
		  background-color: #efefef;

		}

		.m {
			color: blue;
		}
    .c {
      color: red;
      }
      .o {
        color: violet;
      }
      .g {
        color: green;
      }
      .p {
        color: orange;
      }
      
 	.desno {
			float: right;
		}

		.noga {
			position: absolute; /* ali fixed */
			bottom: 0px;
			left: 0px;
			right: 0px;
			height: 30px;
		}