Single Post

@extends('layouts.main')

@section('container')
    <div class="bg-white w-full flex flex-col gap-5 px-3 md:px-16 lg:px-28 md:flex-row">

        <!-- sticky sidebar -->
        <aside class="hidden md:w-1/3 lg:w-1/4 py-4 md:block">
            <div class="h-52"></div>
            <div class="sticky top-20 flex flex-col gap-2 p-2 border rounded-xl">
                <div class="flex items-center gap-x-6">
                    <img class="h-16 w-16 rounded-full"
                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                        alt="">
                    <div>
                        <h3 class="text-base font-bold leading-7 tracking-tight">Maftuh Romadon</h3>
                        <p class="text-sm font-semibold leading-6 text-slate-500">Fullstack Developer
                        </p>
                    </div>
                </div>
            </div>
        </aside>




        <main class="md:w-2/3 lg:w-3/4 w-full py-1 min-h-screen">
            <div class="p-2 md:p-4">
                <h1 class="font-bold text-xl md:text-2xl my-4">Recently Viewed</h1>

                <!-- content -->
                <div>

                    <h2 class="text-xl font-bold mb-4">Today</h2>

                    <ul class="space-y-10">
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 1"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 1</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 2"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 2</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                    </ul>


                    <h2 class="text-xl font-bold my-4">Yesterday</h2>
                    <ul class="space-y-10">
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 1"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 1</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 2"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 2</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                        <li class="flex items-center space-x-4">
                            <img src="https://source.unsplash.com/random/200x200" alt="Product 3"
                                class="w-16 h-16 rounded-full">
                            <div>
                                <h3 class="text-lg font-semibold">Product 3</h3>
                                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                            </div>
                        </li>
                    </ul>

                </div>

            </div>
        </main>
    </div>
@endsection