Laravel 5.8 mail blade with default css styling or inline styling doesn't work

I created mail html blade file designed with css file in Laravel 5.8.

I tried many ways to work the degisned view with css, but nothing actually works.

Sending email is fine, I just changed the whole designed blade file.
Using default.css or inlined styling both doesn't work.
So confusing about this situation.

• view (resources/views/mail/stat.blade.php)

<div class="element">
        <img class="bg-logo" src="" />
        <img class="logo" src="" />

        <div class="text-title">베이직바이블<br />서비스 주간 리포트</div>
        <div class="font-bold-700 text-service_term">2023.12.01 - 2023.12.07</div>

        <div class="whitebox-base OS">
            <img src="" alt="" class="app-icon">
            <div class="font-bold-700 text-app_name">베이직바이블</div>
            <div class="font-bold-700 div">쇼핑몰 OS정보</div>
            <div class="OS-2">
                <div class="div-2">
                    <img class="img" src="" />
                    <div class="font-bold-700 text-os_ver">6.6 버전</div>
                </div>
                <div class="div-2">
                    <img class="img" src="" />
                    <div class="font-bold-700 text-os_ver">5.0 버전</div>
                </div>
            </div>
            <div class="IOS">
                <div class="font-bold-700 text-wrapper-3">IOS 개발자계정</div>
                <div class="date">
                    <div class="font-bold-700 text-wrapper-4">365일 남음</div>
                    <div class="text-wrapper-5">만료 2024.12.20</div>
                </div>
            </div>
        </div>
        <div class="whitebox-base box-base-1 box-1">
            <div class="font-bold-700 title">APP</div>
            <div class="text-remain_days">
                <div class="font-heavy-400 normal">203</div>
                <div class="font-bold-700 font-24">일</div>
            </div>
        </div>

    </div>

• route for preview (web.php)

Route::get('mailable', function() {
    // return view('mail.weeklystat');
    $data = App\Models\AppsData::findOrFail(3698);
   
    return new App\Mail\WeeklyStatMail($data);
});

• for send mail (app/Mail/StatMail.php)

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

use App\Models\AppsData;

class WeeklyStatMail extends Mailable
{
    use Queueable, SerializesModels;

    public $appsData;    
   
public function __construct(AppsData $appsData)
{
        $this->appsData = $appsData;
}

public function build()
    {
        return $this
            ->subject($this->appsData->app_name." 통계")
            ->markdown('mail.stat');
   }
}

** tried this part like this, but didn't work.**

public function build()
    {
        return $this
            ->subject($this->appsData->app_name." 통계")
            ->view('mail.stat');
   }
}

• css (resources/views/mail/html/themes/default.css)

html,
body {
    margin: 0px;
    height: 100%;
}

/* a blue color as a generic focus style */
button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: "SUIT-Bold";
    src: url('/assets/css/fonts/SUIT/SUIT-Bold.ttf') format("truetype");
}

@font-face {
    font-family: "SUIT-Medium";
    src: url('/assets/css/fonts/SUIT/SUIT-Medium.ttf') format("truetype");
}

@font-face {
    font-family: "SUIT-Heavy";
    src: url('/assets/css/fonts/SUIT/SUIT-Heavy.ttf') format("truetype");
}

@font-face {
    font-family: "SUIT-ExtraBold";
    src: url('/assets/css/fonts/SUIT/SUIT-ExtraBold.ttf') format("truetype");
}

.rectangle {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.bg-color-red {
    background-color: #f56650;
}

.bg-color-yellow {
    background-color: #ffa812;
}

.bg-color-green {
    background-color: #00a65a;
}

.bg-color-green-2 {
    background-color: #34a853;
}

.bg-color-black {
    background-color: #000;
}


.font-black {
    color: #000;
}

.font-green {
    color: #00a65a;
}

.font-red {
    color: #f56650;
}

.font-white {
    color: #fff;
}

.font-666 {
    color: #666;
}

.font-bold-700 {
    font-family: "SUIT-Bold", Helvetica;
    font-weight: 700;
    letter-spacing: 0;
    line-height: normal;
}

.font-heavy-400 {
    font-family: "SUIT-Heavy", Helvetica;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

.whitebox-base {
    position: absolute;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.title {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-size: 15px;
    color: #666;
}


.yellow_circle {
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    position: absolute;
    top: 0;
    left: 147px;
    background-color: #ffba00;
    border-radius: 20px;
}

.title_number {
    position: relative;
    width: fit-content;
    margin-top: -6.5px;
    margin-bottom: -4.5px;
    font-family: "SUIT-Heavy", Helvetica;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    line-height: normal;
    font-size: 20px;
}

.text-title {
    position: absolute;
    top: 42px;
    left: 0;
    font-family: "SUIT-ExtraBold", Helvetica;
    font-weight: 800;
    color: #151515;
    font-size: 36px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.text-subtitle {
    position: absolute;
    top: 87px;
    left: 22px;
    font-family: "SUIT-Regular", Helvetica;
    font-weight: 400;
    color: #999;
    font-size: 18px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
}

.text-unit {
    position: relative;
    width: fit-content;
    color: #151515;
    font-size: 24px;
    text-align: right;
}


.img {
    position: relative;
    width: 16px;
    height: 16px;
}

.num-up {
    color: #e74646;
    font-size: 16px;
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "SUIT-Bold", Helvetica;
    font-weight: 700;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.num-down {
    color: #4673e7;
    font-size: 16px;
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "SUIT-Bold", Helvetica;
    font-weight: 700;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.data-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    position: relative;
    gap: 8px;
    width: 100%;
    flex: 0 0 auto;
}









.element {
    position: relative;
    width: 895px;
    height: 605px;
    background-color: #e8ebed;
}

.element .bg-logo {
    position: absolute;
    width: 473px;
    height: 135px;
    top: 0;
    left: 422px;
}

.element .logo {
    position: absolute;
    width: 58px;
    height: 66px;
    top: 48px;
    left: 58px;
}

.element .text-title {
    position: absolute;
    top: 122px;
    left: 58px;
    color: #151515;
    font-size: 48px;
    font-family: "SUIT-ExtraBold", Helvetica;
    font-weight: 800;
    letter-spacing: 0;
    line-height: normal;
}

.element .text-service_term {
    position: absolute;
    top: 244px;
    left: 58px;
    color: #7a7a7a;
    font-size: 20px;
}

.element .OS {
    width: 225px;
    height: 260px;
    top: 305px;
    left: 40px;
}

.element .app-icon {
    position: absolute;
    width: 72px;
    height: 72px;
    top: 47px;
    left: 77px;
    border-radius: 20px;
    border: 1px solid;
    border-color: #0000000d;
    /* background-image: url(https://c.animaapp.com/XyeV1pwN/img/app-icon@2x.png);
    background-size: cover;
    background-position: 50% 50%; */
}

.element .text-app_name {
    position: absolute;
    top: 126px;
    left: 60px;
    font-size: 20px;
    color: #151515;
}

.element .div {
    position: absolute;
    top: 15px;
    left: 16px;
    font-size: 15px;
    color: #666666;
}

.element .OS-2 {
    display: flex;
    width: 193px;
    align-items: flex-start;
    gap: 8px;
    position: absolute;
    top: 159px;
    left: 16px;
}

.element .div-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: #999999;
    border-radius: 8px;
}

.element .img {
    position: relative;
    width: 16px;
    height: 16px;
}

.element .text-os_ver {
    position: relative;
    width: fit-content;
    margin-top: -0.5px;
    color: #ffffff;
    font-size: 12px;
}

.element .IOS {
    display: flex;
    width: 193px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    position: absolute;
    top: 195px;
    left: 16px;
    background-color: #f1f1f1;
    border-radius: 8px;
    overflow: hidden;
}

.element .text-wrapper-3 {
    position: relative;
    width: fit-content;
    color: #666666;
    font-size: 12px;
}

.element .date {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
}

.element .text-wrapper-4 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    color: #151515;
    font-size: 14px;
    text-align: right;
}

.element .text-wrapper-5 {
    position: relative;
    width: fit-content;
    color: #999999;
    font-size: 10px;
    text-align: right;
    font-family: "SUIT-Medium", Helvetica;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.element .box-base-1 {
    display: flex;
    flex-direction: column;
    width: 181px;
    height: 122px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
}

.element .box-1 {
    top: 305px;
    left: 281px;
}

.element .box-2 {
    top: 305px;
    left: 478px;
}

.element .box-3 {
    top: 305px;
    left: 675px;
}

.element .box-4 {
    top: 443px;
    left: 281px;
}

.element .box-5 {
    width: 181px;
    height: 122px;
    top: 443px;
    left: 478px;
}

.element .box-6 {
    width: 181px;
    height: 122px;
    top: 443px;
    left: 675px;
}

.element .text-remain_days {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    align-self: stretch;
    width: 100%;
    position: relative;
    flex: 0 0 auto;
}

.element .normal {
    color: #151515;
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-size: 40px;
    text-align: right;
}

.element .not {
    color: #e74646;
}

.element .font-24 {
    font-size: 24px;
}

.element .text-lock {
    position: absolute;
    top: 15px;
    left: 16px;
    color: #666;
    font-size: 15px;
}

.element .locked {
    display: flex;
    width: 66px;
    height: 66px;
    top: 40px;
    left: 57px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    border-radius: 33px;
    background-color: #ffe39b;
    overflow: hidden;
}

.element .lock {
    position: relative;
    width: 32px;
    height: 33.36px;
}

.element .box-6 .text-not_using {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 24px;
    position: absolute;
    top: 53px;
    left: 45px;
    background-color: #e8ebed;
    border-radius: 28px;
}

.element .not_using {
    position: relative;
    flex: 0 0 auto;
    color: #999;
}

I even tried to copy and paste the default.css to resources/views/vendor/mail/html/themes/default.css, but it doesn't work either.

Also tried to change the css styles to inline styles in stat.blade.php, then it works but not actually worked as the original style.

How can I make it work for this mail styling with css? Would it only worked with table tags?

via Chebli Mohamed