@extends('LandingPage.Layouts.master')
@section('content')
    <div class="compare-block md:py-20 py-10">
        <div class="container">
            <div class="content-main">
                <div class="list-product flex">
                    <div class="left lg:w-[240px] w-[170px] flex-shrink-0"></div>
                    <div class="right flex w-full border border-line rounded-t-2xl border-b-0">

                    </div>
                </div>
                <div class="compare-table flex">
                    <div class="left lg:w-[240px] w-[170px] flex-shrink-0 border border-line border-r-0 rounded-l-2xl">
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Rating</div>
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Price</div>
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Type</div>
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Brand</div>
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Size</div>
                        <div class="item text-button flex items-center h-[60px] px-8 w-full border-b border-line">
                            Colors</div>
                    </div>
                    <table class="right border-collapse w-full border-t border-r border-line">
                        <tr class='list-rate-block flex w-full items-center'>

                        </tr>
                        <tr class='list-price-block flex w-full items-center'>

                        </tr>
                        <tr class='list-type-block flex w-full items-center'>

                        </tr>
                        <tr class='list-brand-block flex w-full items-center'>

                        </tr>
                        <tr class='list-size-block flex w-full items-center'>

                        </tr>
                        <tr class='list-color-block flex w-full items-center'>

                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection