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="#" class="one"><img src="http://www.picshare.ru/uploads/120907/4mM4Lg6IkJ.png" alt="Фото блокнота">&nbsp;Описание</a> 
     <a href="http://jsfiddle.net/Dimetr/6HUfN/2/show/" 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/VvCwG17yuD.png" alt="Фото блокнота">&nbsp;Описание</p>
      <form action="file.php">
      <p id="tg"><img src="http://www.picshare.ru/uploads/120907/ibDkQP9C9d.png" alt="Фото коктейля">
      <input type="button" value="Загрузить" class="load"> </p>
        <input type="text" name="NameKok" placeholder="Название коктейля"><br>
        <input type="text" name="AltName" placeholder="Альтернативное название коктейля"><br>
        <textarea name="ShortKom" placeholder="Краткое описание" class="fthree"></textarea><br>
        <textarea name="Instr" placeholder="Инструкция для приготовлению" class="ffour"></textarea>
      </form>
      <a href="http://jsfiddle.net/Dimetr/6HUfN/2/show/" class="ingrad">Ингредиенты</a>
      <img src="http://www.picshare.ru/uploads/120907/vrV26b147L.png" class="bottomK">
    </div>
  </body>
</html>

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;
        background:#60a5ff;
        color:white;
        border-radius:4px 0 0 4px;
        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 #60a5ff;
        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 #a0cfff;
        border-bottom:21px solid transparent;
        border-top:20px solid transparent;
        position:absolute;
       ...