JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shadow">
      
                <div class="col-right">
                    <h1>Naujienos</h1>
                    <hr size=1>
                    <div class="naujiena cf">
                        <p>
                            <div class="tipoPaveiksliukas"></div>
                            <h2>Naujienos antraste</h2>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
                        </p>
                    </div>

                    <div class="naujiena cf">
                        <p>
                            <div class="tipoPaveiksliukas"></div>
                            <h2>Naujienos antraste</h2>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in dignissim lacus. Curabitur consequat pharetra placerat. Nullam pretium vehicula tortor. Vivamus diam orci, consectetur ullamcorper eleifend ut, aliquet a arcu. Phasellus congue eleifend rhoncus. Vestibulum vulputate bibendum rutrum.
                        </p>
                    </div>

CSS

body, html{
            margin: 0;
            padding: 0;
            line-height: 19px;
            font-size: 15px;
        }
        .cf:before, /*clear fix klase*/
        .cf:after {
            content:"";
            display:table;
        }

        .cf:after {
            clear:both;
        }
        .cf {
            zoom:1;
        }

        .tipoPaveiksliukas{
            background: #fff;
            width: 150px;
            height: 140px;

            /*reikia papildyti cia bisky*/
        }

        .main{
            position: relative;

            width: 800px;
            margin: 0 auto;
            background: #C6E070;


            /*reikia papildyt*/
        }
        .kalbos{
            position: absolute;
            top: 0;
            right: 10px;
            background: #287D7D;
            padding: 2px 5px;
            color: #fff;
        }
        .kalbos:hover{
            cursor: pointer;
        }
        .visosKalbos{
            position: absolute;
            top: 23px;
            right: 10px;
            background: #1C344C;
            padding: 5px;
            z-index: 10;
            display: none;
        }
        .visosKalbos a{
            display: block;
            color: #fff;
            text-decoration: none;
        }

        body{
            background: #F2F2F2;
            font-family: "Arial";
            color: #1C344C;
        }
        .shadow{
        }



        .header{
        margin-top:7px;
        font-size:26;
        font-style:italic;


        }

        .menu-horizontal-wrap{
            margin: 10px 20px 5px 20px;
            background-color: #287D7D;
            padding:10px;

        }
        .menu-horizontal-wrap a{
            color:#FFF;
            text-decoration: none;
            padding: 6px;


        }
        .menu-horizontal-wrap a:hover{
            /*galite improvizuoti*/
            background-color:gray;

        }
        .menu-horizontal-wrap a:last-child{...

JavaScript

// reikia papildyti sita koda kad dar karta paspaudus ant kalbos mygtuko kalbu pasirinkimas uzsidarytu
            var kalbuBusena = 'closed';

            $('.kalbos').click(function(){
                $('.visosKalbos').slideToggle('fast');
                kalbuBusena = 'open';

            });