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="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="#" 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/e1RdY35Zm9.png" alt="Фото бутылки">&nbsp;Бокалы</p>
       <form action="file.php" name="Form4" method="post">
       <label><p data-title=" Бокал">
         <input type="checkbox" name="foto[]"  ><span class="check"  ><img src="http://www.picshare.ru/uploads/120907/68OV4XmFF5.png" alt="check" class="foto">&nbsp;Выбрать</span><img src="http://www.picshare.ru/uploads/120907/4iUUyYbdkJ.png"  alt="бокал" class="alignfoto" >
       </p></label>
       <label><p data-title="Бокал ">
         <input type="checkbox" name="foto[]"  ><span class="check"><img src="http://www.picshare.ru/uploads/120907/68OV4XmFF5.png" alt="check" class="foto">&nbsp;Выбрать</span><img src="http://www.picshare.ru/uploads/120907/ZpZ1SkS64g.png"  alt="бокал" class="alignfoto" >
       </p></label>
       <label><p data-title="Бокал для слоистых коктейлей">
         <input type="checkbox" name="foto[]"  ><span class="check"><img src="http://www.picshare.ru/uploads/120907/68OV4XmFF5.png" alt="check"...

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.four{
        border-radius:0px 4px 4px 0;
        background:#60a5ff;
        color:white;
        text-shadow:0 0 10px #1a77f0;
      }
      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 #a0cfff;
        border-bottom:21px solid transparent;
        border-top:20px solid transparent;
        position:absolute;
        left:352px;
  ...

JavaScript

http://jsfiddle.net/Dimetr/3fmpW/1/