JSFiddle - React, Tailwind, and code Playground

by absentik

HTML

<div class="phone">
    <div class="display">
        <p>0</p>
        <div class="conteiner">
            <ul class="menu">
                <li>
                    <span>A</span>
                    <ul>
                        <li></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>              
                    </ul> 
                </li>
                <li>
                    <span>B</span>
                    <ul>
                        <li></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>              
                    </ul> 
                </li>
                <li>
                    <span>C</span>
                    <ul>
                        <li></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>              
                    </ul> 
                </li>
                <li class="active">
                    <span>D</span>
                    <ul>
                        <li></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>              
                    </ul>                    
                </li>
                <li>
                    <span>E</span>
                    <ul>
                        <li></li>
                        <li><span>1</span></li>
                        <li><span>2</span></li>
                        <li><span>3</span></li>              
                    </ul> 
                </li>
            </ul>
        </div>
    </div>
    <div class="reflect"></div>
    <div class="off"></div>
    <div class="button">
        <p></p>
    </div>
    <div class="micro"></div>
    <div class="camera"><p></p></div>
   ...

CSS

.title {
    font: italic bold 300%/1em Georgia;
    position: pelative;
    margin: 50px auto;
    text-align: center;
    color: #4A4846;
}

.conteiner {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 256px;
    padding: 0;
    margin: 0;
    list-style: none;
    letter-spacing: -1px;
    line-height: 0;
    font-size: 0;
    z-index: 100;
}
.menu {
    position: relative;
    bottom: 0px;
    display: inline-block;
    text-align: center;
    height: 50px;
    list-style: none;
    letter-spacing: -1px;
    line-height: 0;
    font-size: 0;
    border: 1px solid #121212;
}

.menu > li {
    display: inline-block;
    letter-spacing: normal;
    line-height: normal;
    font-size: 12px;
    vertical-align: top;
    width: 50px;
    height: 50px;
    background: #4F555A; /* Для старых браузров */
    background: -moz-linear-gradient(top, #737A80, #41474B);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#737A80), color-stop(100%,#41474B));
    background: -webkit-linear-gradient(top, #737A80, #41474B);
    background: -o-linear-gradient(top, #737A80, #41474B); 
    background: -ms-linear-gradient(top, #737A80, #41474B); 
    background: linear-gradient(top, #737A80, #41474B);
    box-shadow: inset 0px 1px 1px 0px #BCBFC2;
    -moz-box-shadow: inset 0px 1px 1px 0px #BCBFC2;
    -webkit-box-shadow: inset 0px 1px 1px 0px #BCBFC2;
    -o-box-shadow: inset 0px 1px 1px 0px #BCBFC2;
    border-right: 1px solid #121212;
    cursor: pointer;
}
.menu > li:last-child { border: none; }

.menu > li > ul > li {
    background: #3C4044; /* Для старых браузров */
    background: -moz-linear-gradient(top, #41474B, #737A80);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41474B), color-stop(100%,#737A80));
    background: -webkit-linear-gradient(top, #41474B, #737A80);
    background: -o-linear-gradient(top, #41474B, #737A80); 
    background: -ms-linear-gradient(top, #41474B, #737A80); 
 ...

JavaScript

var text = "0";
var colors = ["#407299", "#C5376D", "#F2615E", "#6BA57D", "#FFD446", "#00AFF0", "#A7A9B5"];
$(document).ready(function() {
    randomColor();

    $(".menu > li > ul > li").on("click", function() {
        text = $(this).find("span").text();
        randomColor();
        $(".display > p").text(text);
    });
    $(".button").on("click", function() {
        if (!$(".off").is(":visible")) {
            $(".off").fadeIn(500);
        }
        else {
            $(".off").fadeOut(500);
        }
    });
    $(".menu > li").hover(

    function() {
        $(this).find("ul").slideDown(50);
    }, function() {
        $(".menu > li > ul").slideUp(50);
    });

});

function randomColor() {
    min = 0;
    max = colors.length - 1;
    clr = Math.floor(Math.random() * (max - min + 1)) + min;
    $(".display").css({
        "background": colors[clr]
    });
}