JSFiddle - React, Tailwind, and code Playground

by Cupidvogel

HTML

<div class = 'listcontainer'></div>

CSS

div.listcontainer { position: relative; top: 120px; left: 60px; height: 250px; overflow: hidden; width: 200px; }

div.list { background: grey; display: inline-block; border-radius: 0px 9px 9px 9px;  width: 200px; height: 250px; overflow-y: scroll; } 

div.menuitem { width: 200px; position: relative;  min-height: 28px; display: inline-block; margin-right: 0px; padding: 0px 15px 0px 7px; cursor: pointer;  }

.menu { display: inline-block; width: 100%; position: relative; top: 4px; margin-right: -2px;}

.menutext {    color: white;  font-family: "Trebuchet MS","Impact",Helvetica,Arial,Verdana,sans-serif; }

.menu a { outline: none; text-decoration: none; color: white; }

.menuitem:first-child { border-radius: 0px 9px 0px 0px; top: -1px; padding-bottom: 1px; }

.menuitem:last-child { border-radius: 0px 0px 9px 9px; top: 0.1px; padding-bottom: 5px; }

JavaScript

$(document).ready(function(){
a1 = ['Arts and Humanities','Style and Fashion','Travel and Living','Science and Technology','Business and Finance','Electronics and Telecommunications','Politics and Government','Society and Relationships','Entertainment','Education','Space and Astronomy','Health and Hygiene','Computer and Internet'];
    
contdiv = '<div class="list">';
    
$.each(a1,function(i,n) {
    contdiv += '<div class="menuitem"><span class="menu"><span class="menutext"><a href = "foo.com" title="foo">'+n+'</a></span></span></div><br />';
            });
contdiv+= '<div class="menuitem"><span class="menu"><span class="menutext"><a href = "foo.com" title="foo">'+a1[10]+'</a></span><span class="arrow"></span></span></div></div>';
$(contdiv).appendTo('.listcontainer');
var textareaWidth = $(".list").get(0).scrollWidth;
$(".listcontainer").css({width:textareaWidth});
});