Problems with Header

[Professor93M]

Hi Gents,

Please I faced a problem with the Header view.
Header File

    <div class="flex justify-between items-center px-24">
        <p class="text-3xl font-bold w-56 text-center">هنا العنوان</p>
        <img width="150" src="data:image/pdf;base64,{{public_path('images/logo.png')}}"
            alt="Different Store LOGO">
        <p class="text-xl font-bold w-56 text-center font-['tektur']">Here a Title</p>
    </div>
    <div class="bg-[#DE9C55] w-full h-[2] my-5"></div>
</header>

<style>
    header {
        display: block;
        margin: 10px auto 10px auto;
        padding: 10px;
        width: 100%;
    }
    .m-10 {   
    }
    .w-full {
        width: 100%;
    }
    .flex {
        display: flex;
    }
    .justify-between {
        justify-content: space-between;
    }
    .items-center {
        align-items: center;
    }
    .px-24 {
        padding: 24px;
    }
    .text-3xl {
        font-size: 3rem;
    }
    .font-bold {
        font-weight: 700;
    }
    .text-center {
        text-align: center;
    }
    .text-xl {
        font-size: 1.25rem;
    }
    .font-['tektur'] {
        font-family: 'tektur';
    }
    .bg-[#DE9C55] {
        background-color: #DE9C55;
    }
    .h-[2] {
        height: 2px;
    }
    .my-5 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .w-56 {
        width: 56%;
    }
</style>

return Pdf::view('Print.pdf')
            ->withBrowsershot(function (Browsershot $browsershot) {
                $browsershot->scale(0.5);
            })
            ->name('myfile.pdf')
            ->headerView('Print.header')
            ->download()
            ->landscape()
            ->format(Format::A5);

1- As you can see in the attached image, the header is not in the above of the paper and must push the other texts below to be a header. Also, it's so small.

2- The Image that I added is not shown.

Please can you help

[ArielMejiaDev]

Headers and Footer cannot be able to use tailwindcss it would only work with inline CSS.

font-size is the property that would increase the header size.

for images you can use image background, for inline images it would require base64 images content.