index.js

import "tailwindcss/tailwind.css";

function HomePage() {
    return (
        <div className="mx-auto container p-4">
            <div className="lg:w-1/2 w-full pl-0 md:pl-2 lg:pl-8 mt-16 md:mt-0 pt- md:pt-16">
                <div className="shadow-lg rounded-lg">
                    <div className="w-full bg-gray-900 rounded-t-lg p-4 flex flex-row">
                        <div className="rounded-full w-3 h-3 mr-2 border-2 border-red-500"></div>
                        <div className="rounded-full w-3 h-3 mr-2 border-2 border-yellow-400"></div>
                        <div className="rounded-full w-3 h-3 mr-2 border-2 border-green-400"></div>
                    </div>
                    <div className="w-full rounded-b-lg bg-gray-50 p-2">
                        <div className="py-8">
                            <div className="px-4 flex">
                                <div className="h-6 w-3/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-3/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-6/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                            </div>
                            <div className="px-4 flex">
                                <div className="h-6 w-4/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-4/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-4/12 mx-2 my-2 rounded bg-red-600 inline-block">
                                    {/* <div className="h-6 w-6 rounded-full bg-white border-2 border-red-600 relative bottom-2 left-1"></div> */}
                                </div>
                            </div>
                            <div className="px-4 flex">
                                <div className="h-6 w-1/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-3/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-3/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-5/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                            </div>
                            <div className="px-4 flex">
                                <div className="h-6 w-5/12 mx-2 my-2 rounded bg-red-600 inline-block"></div>
                                <div className="h-6 w-5/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-2/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                            </div>
                            <div className="px-4 flex">
                                <div className="h-6 w-3/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-4/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                                <div className="h-6 w-5/12 mx-2 my-2 rounded bg-green-800 inline-block"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default HomePage