JSFiddle - React, Tailwind, and code Playground

by xowap

HTML

<nav class="menu">
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" class="item" target="_blank" rel="noopener">
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M208 88.001h-80v212.498c0 52.58-18.032 67.261-49.412 67.261-14.705 0-27.948-2.521-38.25-6.063L32 423.904C46.7 428.966 69.259 432 86.907 432 158.955 432 208 398.129 208 301.02V88.001zM382.463 80C305.02 80 256 123.998 256 182.154c0 50.083 37.751 81.44 92.641 101.665 39.7 14.158 55.392 26.808 55.392 47.539 0 22.756-18.139 37.425-52.448 37.425-31.863 0-60.789-10.64-80.394-21.255v-.021L256 410.727c18.639 10.638 53.441 21.255 91.167 21.255C437.854 431.98 480 383.43 480 326.284c0-48.55-26.958-79.9-85.278-102.163-43.139-17.191-61.27-26.795-61.27-48.542 0-17.2 15.688-32.869 48.043-32.869 31.846 0 53.744 10.707 66.505 17.291l19.125-64C447.125 87.22 420.188 80 382.463 80z"/></svg>
        JavaScript
    </a>
    <a href="https://docs.python.org/3/" class="item" target="_blank" rel="noopener">
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M193.46 249.056a65.316 65.316 0 0 1 11.586-1.041l-3.122-.015h103.823c4.503 0 8.806-.617 12.908-1.754 19.37-5.363 33.345-22.537 33.345-43.663v-87.224c0-24.832-21.15-43.484-46.289-47.606-15.931-2.624-39.258-3.827-55.089-3.749-15.829.086-30.981 1.404-44.277 3.749C167.143 74.576 160 88.928 160 115.359V144h96v16H128.82c-35.628 0-64.538 42.571-64.813 95.242-.002.253-.007.505-.007.758 0 9.523.94 18.72 2.685 27.404C74.648 323.07 99.451 352 128.82 352H144v-45.935c0-26.827 20.146-51.733 49.46-57.009zm10.196-122.054c-9.592 0-17.384-7.785-17.384-17.403 0-9.664 7.774-17.52 17.384-17.52 9.574 0 17.399 7.855 17.399 17.52.001 9.618-7.809 17.403-17.399 17.403z"/><path fill="currentColor" d="M443.951 222.543C434.78 186.021 411.033 160 383.18 160H368v40.672c0 33.915-22.286 58.474-49.489 62.681a53.943 53.943 0 0 1-8.301.646H206.351a51.41 51.41 0 0...

SASS

$gutter: 20px

$color-0: #242424
$color-1: #a30075
$color-2: #00a159
$color-3: #a16600

body
    margin: 0
    padding: 0
    min-height: 100vh
    display: flex
    align-items: center
    justify-content: center
    font-family: sans-serif

.menu
    display: block
    margin: (- $gutter / 2)
    
.item
    margin: ($gutter / 2)
    padding: 20px 40px
    
    display: flex
    align-items: center
    
    background: white
    border: 3px solid currentColor
    border-radius: 7px
    
    color: $color-0
    text-decoration: none
    
    transition: color ease 300ms
    
    svg
        margin-right: 10px
        
    &:hover
        &:nth-child(1)
            color: $color-1
            
        &:nth-child(2)
            color: $color-2
            
        &:nth-child(3)
            color: $color-3