Page content is larger than the screen width - html

I'm using tailwind css to build a website but my page content is increasing the screen width. I have checked that the box-sizing is set to border-box and margin, padding for body is set to 0 too but this issue still occurs.
How do i solve this issue?
Navbar html:-
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="./assets/css/main.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="./assets/images/paper.png">
</head>
<body class="bg-sky-500 overflow-x-hidden w-full">
<nav class="px-6 md:px-12 py-1.5 md:py-2.5 bg-yellow-400 m-3 md:m-5 rounded-xl shadow-md shadow-sky-600 flex absolute z-50 top-0 right-0 left-0 w-full">
<img src="./assets/images/icon.png" alt="icon" class="w-[14%] sm:w-[6.5%] md:w-[4.2%] hidden xs:block" />
<p class="font-semibold text-gray-50 font-main m-auto text-xs sm:text-base md:text-lg tracking-wider">ROCK PAPER SCISSOR</p>
</nav>
<div class="mb-24 md:mb-0 mt-[14rem] md:mt-0 md:!my-56 flex mx-5 md:mx-0 relative w-full">
<div class="md:ml-32 mt-6 md:mt-12 font-main w-full md:w-2/6 mr-auto">
<div class="mb-2.5 h-[36px] md:h-[60px]">
<p class="text-4xl md:text-6xl text-yellow-400 font-bold drop-shadow-md" id="rpsText">ROCK</p>
</div>
<div class="inline-block w-full">
<p class="text-sm md:text-lg text-gray-50 mb-6">Online rock paper scissor game, create a room or join one to play with your friends!</p>
<div class="inline-flex w-full gap-3 flex-wrap">
<button class="rounded-md px-3 md:px-5 py-1.5 md:py-2 bg-yellow-400 hover:shadow-xl shadow-sky-700 duration-300 ease-in-out font-bold font-main text-stone-800 text-xs md:text-sm w-full md:mx-auto">CREATE ROOM</button>
<button class="rounded-md px-3 md:px-5 py-1.5 md:py-2 bg-yellow-400 hover:shadow-xl shadow-sky-700 duration-300 ease-in-out font-bold font-main text-stone-800 text-xs md:text-sm w-full md:mx-auto">JOIN ROOM</button>
</div>
</div>
</div>
<div class="md:mr-24 absolute md:relative -top-24 sm:-top-28 md:top-0 -right-14 w-[50%] sm:w-[40%] md:w-[30%]">
<img src="./assets/images/rock.png" alt="rockImg" id="rockImg" class="w-[64%] drop-shadow-lg rpsImage !opacity-100" />
<img src="./assets/images/paper.png" alt="paperImg" id="paperImg" class="w-[64%] drop-shadow-lg rpsImage" />
<img src="./assets/images/scissor.png" alt="scissorImg" id="scissorImg" class="w-[64%] drop-shadow-lg rpsImage" />
</div>
</div>
<div class="bg-yellow-500 h-72 mt-60 mx-3 md:mx-44 rounded-xl p-4 mb-44">
<p class="mx-auto text-xl font-bold text-stone-800 font-main text-center drop-shadow-md">ABOUT US</p>
</div>
<script src="./assets/js/rpsHero.js"></script>
</body>
</html>

Related

Reduce tailwind image to the smallest

I have added images on my page using tailwinds but on mobile, the image still appears to be bigger than I want.
My code below:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl">
<div class="flex">
<div class="md:shrink-0">
<img class="h-40 w-full scale-75 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
</div>
<div class="p-4">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>
</div>
What I get
What I want

I think the best way to make a website responsive is by using display: grid;>. I think this solves your problem:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl grid grid-cols-3 gap-4">
<img class="h-30 w-full col-span-1 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
<div class="col-span-2">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>

Tailwind Wrong Image Width

There is a problem while styling tailwind-react app.
The image must be look like this:
But my image looking like this. As you can see, it is not 438px.
Source code:
<div className='flex flex-col fg:flex-row w-full fg:h-[340px] fg:items-center hover:bg-gray-100 transition-colors duration-250'>
<div className='flex h-60 fg:h-[292px] fg:w-[438px] border border-black'>
<img className='w-full h-full object-cover object-center' src={require('../../image.jpg')} />
</div>
<div className='flex flex-col pl-4 pr-6 pt-6 pb-6'>
<h1 className='text-[28px] font-bold'>{item.title}</h1>
<p className='text-[17px] mt-1'>{item.summary}</p>
<div className='flex flex-col mt-2 sm:flex-row sm:gap-[10px]'>
<p className='text-gray-500 block text-[14px]'><Link to="/about" className='hover:underline'>{item.author}</Link></p>
<div className='flex gap-[10px] mt-1 sm:mt-0'>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><FavoriteBorderSVG className='w-[16px] fill-gray-500' /><p className='text-sm text-gray-500 mt-[1px] ml-[2px]'>{` ${item.likeCount && item.likeCount != "0" ? item.likeCount : ""}`}</p></span></Link>
</div>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><ChatBubbleBorderSVG className='w-[16px] fill-gray-500' /><p className='text-sm text-gray-500 mt-[1px] ml-[2px]'>{` ${item.commentCount && item.commentCount != "0" ? item.commentCount : ""}`}</p></span></Link>
</div>
<div className='flex'>
<Link to="/"><span className='flex flex-row'><ShareSVG className='w-[16px] fill-gray-500'/></span></Link>
</div>
</div>
</div>
</div>
</div>

Input element goes beyond the mobile screen width

I have the search input element and when I view it on mobile it goes beyond the width of the screen. I'm not sure why:
<template>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<div class="relative">
<input class= "bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
Any help is appreciated.
EDIT:
I tried to remove styles that set padding:
<template>
<div id="app" class="bg-gray-200 ">
<section class="flex justify-between bg-gray-800 ">
<div class=" ">
<input class= "bg-gray-900 "
placeholder="Search by keywords"/>
</div>
<button>Filters</button>
</section>
</div>
</template>
but it didn't work.
I'm looking to solve it with tailwind classes, without resorting to raw css solutions.

It's still not clear what's setting the width on the input (could simply be user-agent/browser default), but overriding it helps:
.flex input { /* or put a custom class on your input, such as input-flex */
min-width: 0;
}
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
Turns out you can use the w-full fluid width class to similar effect:
body {
width: 240px; /* demo only */
}
<link href="https://unpkg.com/tailwindcss#1.0.0/dist/tailwind.min.css" rel="stylesheet"/>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 ">
<input class="w-full bg-gray-900 text-white rounded-lg px-12 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
<button>Filters</button>
</section>
</div>
You could target smaller screens with the sm modifier, as sm:w-full.

The input break is due to the padding you added.
It has 3rem padding-rigth, and when the screen is smaller, the component is larger than the width.
You should decrease the size of your padding.
The ideal would be to decrease the padding, and try to work with a text-indent in css.
.flex input{
text-indent: 10px;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="app" class="bg-gray-200 antialiased">
<section class="grid grid-cols-2 bg-gray-800 px-3 py-3 ">
<div class="relative">
<input class="bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2
focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
</div>
<div class="text-right">
<button>Filters</button>
</div>
</section>
</div>

You need to handle the responsive variant classes and flex-1 will set the full width for the <input> element for this:
<div>
<div id="app" class="bg-gray-200 antialiased">
<section class="flex justify-between bg-gray-800 px-4 py-3 col-gap-2">
<input class="block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black " placeholder="Search by keywords"/>
<button class="block text-gray-100">
<span class="hidden md:block">Filters</span>
<span class="md:hidden">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
</svg>
</span>
</button>
</section>
</div>
</div>
Checkout the code here : Example Code and Output

With the help of one of the answers here I found an answer which I believe is a better solution than setting the divs width:
https://play.tailwindcss.com/R474hCHy19
What I did was simply removed the <div class="relative"> so that the input element is now directly inside the section element. And then I added overflow-auto (to enforce all elements to stay within the screen width) and flex-1 (to force input element to fill all available space when the screen width increases) classes to the input element.
<section class="flex justify-between col-gap-4 bg-gray-800 px-2 py-3 ">
<input class= "flex-1 overflow-auto bg-gray-900 text-white px-2
focus:outline-none focus:bg-white focus:text-gray-500"
placeholder="Search by keywords"/>
<button class="px-4 bg-gray-700 ">Filters</button>
</section>

TailwindCSS Search Input Group Example:
CodePen: Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50">
<div class="col-start-2 col-span-4">
<span class="z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</span>
<div class="flex justify-between">
<input type="search" name="search" id="search" placeholder="Search Item..." class="px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border" />
<button type="submit" class="w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600">Search</button>
</div>
</div>
</div>

Fix the height for child (Tailwind)

I'm trying to vertical center the form into my app.
Into tailwind.config.js , I've set the h-screen to 100vh (without header and footer height) :
module.exports = {
purge: [],
theme: {
minHeight: {
screen: 'calc(100vh - 296px)',
},
fontFamily: {
title: ['Righteous', 'sans-serif'],
body: ['Montserrat', 'sans-serif'],
},
},
variants: {},
plugins: [],
}
It works perfectly, but when I put h-full into my child (to be 100% of parent), the content don't dapat the height to be vertically center.
You can see the code in my screenshots below , the child is set to 100% but don't expend the div..
What is wrong ? Thanks
Screens here :
https://imgur.com/a/dT2nW7B
Edit (html code):
<section class="container mx-auto h-full px-6 p-10">
<div class="flex items-center flex-wrap">
<div class="w-full md:w-1/2">
<img src="images/illustrations/contact.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-first-name">
Prénom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-first-name" type="text" placeholder="Jack">
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-last-name">
Nom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name" type="text" placeholder="Pot">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
E-mail
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="email" type="email" placeholder="jackpot#exemple.fr">
<p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
Message
</label>
<textarea
class=" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none"
id="message" placeholder="Je vous contacte pour ..."></textarea>
<p class="text-gray-600 text-xs italic">Re-size can be disabled by set by resize-none / resize-y
/
resize-x
/ resize</p>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3">
<button
class="shadow bg-blue-500 hover:bg-white hover:text-blue-500 rounded-full hover:border-blue-500 border border-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
type="button">
Envoyer
</button>
</div>
<div class="md:w-2/3"></div>
</div>
</form>
</div>
</div>
</section>
this code extends (laravel blade) this layout :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dico des Mots</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" type="text/css" href="css/app.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>
<body class="font-body">
#include('components.navbar')
<main id="app" class="min-h-screen">
#yield('content')
</main>
#include('components.footer')
</body>
</html>

You should use h-screen for this. See the working model here jsfiddle
<section class="container mx-auto"> // remove h-full and padding
<div class="flex items-center h-screen flex-wrap"> // add h-screen
Tip:
h-full is 100% (relative to parent)
h-screen is 100vh (relative to screen)

Laravel 7 footer not displaying in certain webpages

I created a footer that I wanted to #include to other webpages. As such, I created #section('content'), then at the bottom #include('footer') then #endsection. Now this works only on my contact page which is showing the footer. But is not working on my home or blog pages. Below I will include the code I'm working on Laravel 7, using blade, tailwindcss, html/css. I tried multiple things like moving around #include, or #extends or #yeild but couldn't figure this out. Any help or direction would be appreciated.
When I inspect the homepage, for instance, the footer is being passed through but is mixed in with the navbar. When I inspect the contact page its placed where it should be at the bottom of the page. This has me stumped.
FOOTER
#extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
#yield('footer')
LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
</div>
</nav>
#yield('content')
</body>
</html>
CONTACT PAGE
#extends('layout')
#section('title', 'Contact')
#section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
#include('footer')
#endsection
HOME PAGE
#extends('layout')
#section('title', 'Home')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to blog about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
#include('footer')
#endsection
Lastly BLOG PAGE
#extends('layout')
#section('title', 'Blog')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
#endforelse
</ul>
</div>
</div>
</main>
#include('footer')
#endsection

Simply, improper html tags. Lesson learned to ensure open and close tags are equal. Because I was short </div> tags my code was suffering and not working as it should.
Credit goes to #kerbholz