JSFiddle - React, Tailwind, and code Playground

by Dimetr

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ингредиетны</title>
    <meta charset="windows-1251">
 </head>
  <body>
    <div class="head">
    <a href="http://jsfiddle.net/Dimetr/Cd6BD/3/show/" class="one"><img src="http://www.picshare.ru/uploads/120907/4mM4Lg6IkJ.png" alt="Фото блокнота">&nbsp;Описание</a> 
     <a href="#" class="two"><img src="http://www.picshare.ru/uploads/120907/6lFb353Fzm.png" alt="Фото бутылки">&nbsp;Ингредиенты</a> 
     <a href="http://jsfiddle.net/Dimetr/TWmvS/2/show/" class="three"><img src="http://www.picshare.ru/uploads/120907/GX0ObCI7bJ.png" alt="Фото тарелки">&nbsp;&nbsp;Параметры</a> 
     <a href="http://jsfiddle.net/Dimetr/3fmpW/1/show/" class="four"><img src="http://www.picshare.ru/uploads/120907/713eCQ69Bg.png" alt="Фото бокала">&nbsp;&nbsp;Бокалы</a>     </div>
    <div class="content">
     <img src="http://www.picshare.ru/uploads/120907/8c8fea9MYj.png" class="topK">
     <p id="col"><img src="http://www.picshare.ru/uploads/120907/o7SX5Lw73u.png" alt="Фото бутылки">&nbsp;Ингредиенты 
     <span data-title="Украшение?" class="berry"><img src="http://www.picshare.ru/uploads/120907/47Zz01Wg1K.png" alt="Клубника" ></span></p>
      <form action="File.php"  method="get">
        <!--   ================== 1 ==================-->  
        <div>
        <select name="nameingr" size="1">
            <option disabled>Название ингредиента</option>
          <optgroup label="Безалкогольные напитки">
            <option value="water">Вода</option>
            <option value="juice">Сок</option>
            <option value="milk">Молоко</option>
          </optgroup>
        </select>
        <input type="number" name="amount" placeholder="1">
        <select name="dimension" >     
            <option value="ml">мл</option>
            <option value="gr">гр</option>
            <option value="litr">кг</option>
        </select>
        <label><input type="checkbox" name="check[]" ><span class="check"></span></label>
        </div>
       ...

CSS

body{
         margin:10px 0px;
       }
       /*Создание меню*/
      .head{
        background:#1a77f0;
        padding:0px;
        text-align:top;
        position:relative;
        width:705px;
        margin:auto;
        border-radius:4px;
        box-shadow:0px 6px 6px -2px grey;
        -webkit-box-shadow:0px 6px 6px -2px grey;
        -moz-box-shadow:0px 6px 6px -2px grey;
      }
      
      /*Общие настройки для ссылок*/
      .head a{
        width:175px;
        display:inline-block;
        background:#a0cfff;
        font:15px normal arial,sans-serif;
        margin:1px 0px 1px -3px;
        padding:8px 0px;
        text-align:center;
        text-decoration:none;
        color:#1a77f0;
      }
      /*Описание используемой ссылки*/
      a.one{
        margin-left:1px;
        border-radius:4px 0 0 4px;
      }
      a.two{
        background:#60a5ff;
        color:white;
        text-shadow:0 0 10px #1a77f0;
      }
      a.four{
        border-radius:0px 4px 4px 0;
      }
      a:hover{
        color:#480048;
      }
      /*создание треугольника для первой ссылки*/
      a.one:after{
        content:"";
        display:inline-block;
        border-left:15px solid #a0cfff;
        border-bottom:21px solid transparent;
        border-top:20px solid transparent;
        position:absolute;
        left:176px;
        top:1px;
      }
      /*создаю рамку для треугольника с помощью треугольника иного цвета*/
      a.one:before{
        content:"";
        display:inline-block;
        border-left:16px solid #1a77f0;
        border-bottom:22px solid transparent;
        border-top:21px solid transparent;
        position:absolute;
        left:176px;
        top:0px;
      }
      /*создание треугольника для второй ссылки*/
      a.two:after{
        content:"";
        display:inline-block;
        border-left:15px solid #60a5ff;
        border-bottom:21px solid transparent;
        border-top:20px solid transparent;
        position:absolute;
 ...