JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="component-picker">
    <ol>
        <li>2010</li>
        <li>2011</li>
        <li>2012</li>
        <li>2013</li>
        <li>2014</li>
        <li>2015</li>
        <li>2016</li>
        <li>2017</li>
        <li>2018</li>
        <li>2019</li>
        <li>2020</li>
    </ol>
    <div class="fader"></div>
</div>

CSS

.component-picker{
    position: relative;
}

ol {
    overflow: hidden;
    width: 8em;
    height: 6em;
    position: relative;
    text-align: center;
    border: 0.5em solid black;
    border-radius: 0.5em;
    padding: 0px;
}

li {
    margin: 0px;
    list-style: none;
    padding: 0.5em 0;
    line-height: 1em;
    border: 1px solid #ccf;
}

.fader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 9em;
    background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f500 5%, #f5f5f500 5%, #f5f5f500 95%, #f5f5f5 95%, #f5f5f500 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}