Related Links Sidebar

<div class="bg-gray-100 py-10">

    {{!-- component start --}}

    {{!-- 
        When implementing:
        - move inline styling to stylesheet
        - update url
        - update clicky and ga params
        - update text
     --}}

    <style>
        .related-content-sidebar {
            width: 200px;
        }
    </style>

    <div class="related-content-sidebar mx-auto">

        <div class="block bg-white shadow-sm hover:shadow-md"></div>
            <div class="text-white bg-green-500 p-4 text-xl font-light leading-snug flex">
                <svg class="pr-2 h-8 w-8 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M507.31 84.69L464 41.37c-6-6-14.14-9.37-22.63-9.37H288V16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v16H56c-13.25 0-24 10.75-24 24v80c0 13.25 10.75 24 24 24h385.37c8.49 0 16.62-3.37 22.63-9.37l43.31-43.31c6.25-6.26 6.25-16.38 0-22.63zM224 496c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V384h-64v112zm232-272H288v-32h-64v32H70.63c-8.49 0-16.62 3.37-22.63 9.37L4.69 276.69c-6.25 6.25-6.25 16.38 0 22.63L48 342.63c6 6 14.14 9.37 22.63 9.37H456c13.25 0 24-10.75 24-24v-80c0-13.25-10.75-24-24-24z"/></svg>
                related content
            </div>
            <div class="bg-white font-thin p-4 text-sm flex flex-col text-green-500 underline">
                <a class="pb-2" href="http://bolexcollector.com">local organizations</a>
                <a class="pb-2" href="https://bing.com">events</a>
                <a class="pb-2" href="https://webmarks.design">places to stay</a>
            </div>
        </div>

    </div>

    {{!-- component end --}}

</div>