Go to section

 1<div class="h-full">
 2        <div class="flex justify-between space-x-10 w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 ">
 3        <section class="hidden lg:block w-1/6">
 4            <div class=" sticky top-24 overflow-y-auto">
 5                <div wire:id="iEFF4gtkzdbQnsmpsxf3" class="flex flex-col space-y-6 overflow-y-auto">
 6    <div class="flex flex-col space-y-1.5">
 7        <h2 class="text-sm text-slate-300 font-bold uppercase">Getting Started</h2>
 8
 9            <a href="http://bytesize.test/getting-started/introduction" class="capitalize text-slate-500  hover:text-blue-500 font-medium text-base">
10    introduction
11</a>
12
13
14    </div>
15    <div class="flex flex-col space-y-1.5">
16        <h2 class="text-sm text-slate-300 font-bold uppercase">Cheat Sheet</h2>
17                    <a href="http://bytesize.test/cheat-sheet/quick-commands" class="capitalize text-slate-500  hover:text-blue-500 font-medium text-base">
18    quick commands
19</a>
20            </div>
21
22    <div class="flex flex-col space-y-1.5">
23        <h2 class="text-sm text-slate-300 font-bold uppercase">Features</h2>
24                    <a href="http://bytesize.test/features/markdown-for-laravel" class="capitalize text-slate-500  hover:text-blue-500 font-medium text-base">
25    markdown for laravel
26</a>
27                    <a href="http://bytesize.test/features/scroll" class="capitalize text-blue-500 font-bold text-lg">
28    scroll
29</a>
30            </div>
31    <div class="flex flex-col space-y-1.5">
32        <h2 class="text-sm text-slate-300 font-bold uppercase">Components</h2>
33                    <a href="http://bytesize.test/components/tips-and-tricks" class="capitalize text-slate-500  hover:text-blue-500 font-medium text-base">
34    tips and tricks
35</a>
36            </div>
37    <div class="flex flex-col space-y-1.5">
38        <h2 class="text-sm text-slate-300 font-bold uppercase">SASS Roadmap</h2>
39                    <a href="http://bytesize.test/roadmap/overview" class="capitalize text-slate-500  hover:text-blue-500 font-medium text-base">
40    overview
41</a>
42            </div>
43
44</div>
45
46<!-- Livewire Component wire-end:iEFF4gtkzdbQnsmpsxf3 -->            </div>
47        </section>
48        <section class="w-full lg:w-[640px] flex flex-col space-y-4 px-4 lg:px-0">
49            <div class="prose">
50                <p>Go to section</p>
51<ul>
52<li>
53<a href="#hello">Hello</a>
54</li>
55<li>
56<a href="#hello-world">Hello World</a>
57</li>
58<li>
59<a href="#new-section">Another section</a> &lt;-- it's called 'Another section' in this list but refers to 'New section'</li>
60</ul>
61<h2>Hello</h2>
62<h3>Hello World</h3>
63<h2>New section</h2>
64            </div>
65        </section>
66        <section class="hidden lg:block w-1/6 relative">
67            <div class="flex flex-col space-y-6 sticky top-24">
68                <div class="flex flex-col space-y-2">
69                    <h2 class="text-sm text-slate-300 font-bold">ON THIS PAGE</h2>
70                    <a href="#hype-rating" class="text-sm text-slate-400  hover:text-slate-700 hover:font-bold font-medium">
71                        Section
72                    </a>
73                    <a href="#hype-rating" class="text-sm text-slate-400  hover:text-slate-700 hover:font-bold font-medium">
74                        Section
75                    </a>
76                    <a href="#hype-rating" class="text-sm text-slate-400  hover:text-slate-700 hover:font-bold font-medium">
77                        Section
78                    </a>
79                    <a href="#hype-rating" class="text-sm text-slate-400  hover:text-slate-700 hover:font-bold font-medium">
80                        Section
81                    </a>
82                </div>
83
84                <a href="https://github.com/Jakub003/Byte-Size-Tips/tree/main/resources/views/markdown/features/scroll.md" target="_blank" class="h-4 flex space-x-2 text-gray-700 hover:text-gray-400 items-center">
85                    <svg fill="currentColor" class="h-4 w-4" viewBox="0 0 16 16">
86                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
87                    </svg>
88                    <p class="text-sm">Github</p>
89                </a>
90            </div>
91        </section>
92    </div>
93    </div>

Hello

Hello World

New section{{ :id }}