菜鳥切版 邊框

切版練習
用 Tailwind 做一些 css component 存放
只會排版，裝飾都做不出來 崩潰qq

• span text-highlight
• 壓在圖片上的 stripe 不會做先跳過

<div class="container">

        <div class="card">
            <div class="img-wrap bg-blue-300 pr-10" >
                <img src="http://fakeimg.pl/300x225/" alt="">
            </div>

            <div class="tag-wrap bg-gray-300 pr-10">
                <div class="tag-content flex-col pt-5 pb-5 bg-white">
                    <span class="bg-blue-200">分類#</span>
                    <hr>
                    <a href="#" class="flex">
                        <h4 class="pb-5 pt-2">疫情帶來的影響</h4>
                    </a>
                    <div class="flex">
                        <p class="mr-2">jt 程式筆記</p>
                        <p>2020-8-31</p>
                    </div>
                </div>
            </div>
        </div>

</div>

單張輪播圖

    <div class="p-5">
        <div class="card-bg flex flex-col justify-end " style="
        background-image:url('https://picsum.photos/300/225');
        background-repeat: no-repat;
        background-size: cover;
        background-blend-mode: multiply;

        width:300px; height:225px;
        ">

            <div class="text bg-black bg-opacity-50 flex-col p-3 ">
                <span class="bg-blue-200 bg-opacity-50">分類#</span>
                <div class="title text-white" >新聞標題</div>
            </div>
        </div>
    </div>

文章列表

<div class="container grid grid-cols-1 sm:grid-cols-2 ">

    <div class="gg-card  p-2">
        <div class="border-b-2 flex">
            <div class="flex-1">
                <img src="http://fakeimg.pl/100x75" alt="">
            </div>
            <div class="flex flex-col justify-around p-2">
                <ul class="tag flex">
                    <li>商業#</li>
                    <li>行銷#</li>
                </ul>
                <h2>文章1...</h2>
                <div class="meta flex">
                    <p class="pr-2">編輯群</p>
                    <p>2020-08-31</p>
                </div>
            </div>
        </div>
    </div>

    //2
    //3

</div>

熱門文章列

• grid
• col

<div class="container grid grid-cols-1 sm:grid-cols-2 ">

    <div class="grid grid-cols-12 gap-4 p-2 border-2 ">
        <div class="date col-span-2 text-center border-r-2">
            <p>7/9</p>
            <p>THU</p>
        </div>
        <h2 class="col-span-10">與海共生的風格生活，在不同親近海的方式中，理解海的美好，感受人的渺小，發展自己與海獨一無二的關係。</h2>
    </div>

</div>

inner border

一年後回來: 太菜了 8，這個要用 outline-offset 拉。傻眼。

• outline
• outline-offset

<div class="container ">

    <div class="p-5">
        <div class="card-bg flex flex-col justify-end " style="
        background-image:url('https://picsum.photos/300/225');
        background-repeat: no-repat;
        background-size: cover;
        background-blend-mode: multiply;


        width:300px; height:225px;
        outline: 0.1em solid white;
        outline-offset: -1em;
        ">
            <div><span class="m-5 bg-blue-200 wrap">分類#</span></div>
            <div class="text bg-black bg-opacity-50 flex-col p-5 ">

                <div class="title text-white" >震驚！讓你浪費30秒的新聞標題原來是這樣來的</div>
            </div>
        </div>
    </div>

</div>

@endsection

首圖2