Skip to content

Instantly share code, notes, and snippets.

@susantokun

susantokun/welcome.blade.php

Created December 22, 2020 10:44
Show Gist options
  • Save susantokun/db8b45f3f5c3a4a8f6c89451a68bb8ed to your computer and use it in GitHub Desktop.
Save susantokun/db8b45f3f5c3a4a8f6c89451a68bb8ed to your computer and use it in GitHub Desktop.
Download ZIP
Cara Install TailwindCSS di Laravel 8
Raw
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Laravel TailwindCSS</title>
<!-- Styles -->
<link rel="stylesheet"
href="{{ asset('css/app.css') }}">
</head>
<body class="antialiased">
<div class="relative flex justify-center min-h-screen bg-gray-100 items-top dark:bg-gray-900 sm:items-center sm:pt-0">
@if (Route::has('login'))
<div class="fixed top-0 right-0 hidden px-6 py-4 sm:block">
@auth
<a href="{{ url('/home') }}"
class="text-sm text-gray-700 underline">Home</a>
@else
<a href="{{ route('login') }}"
class="text-sm text-gray-700 underline">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}"
class="ml-4 text-sm text-gray-700 underline">Register</a>
@endif
@endauth
</div>
@endif
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="flex flex-col items-center justify-center pt-8 sm:justify-start sm:pt-0">
<div class="text-3xl font-bold leading-relaxed text-red-600">Laravel TailwindCSS</div>
<div class="text-gray-700">Rapidly build modern websites without ever leaving your HTML.</div>
</div>
<div class="mt-8 overflow-hidden bg-white shadow dark:bg-gray-800 sm:rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-6">
<div class="flex items-center">
<svg fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8 text-gray-500">
<path
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
<div class="ml-4 text-lg font-semibold leading-7"><a href="https://laravel.com/docs"
class="text-gray-900 underline dark:text-white">Documentation</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or
have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
<div class="flex items-center">
<svg fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8 text-gray-500">
<path
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
</path>
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<div class="ml-4 text-lg font-semibold leading-7"><a href="https://laracasts.com"
class="text-gray-900 underline dark:text-white">Laracasts</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and
massively level up your development skills in the process.
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<svg fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8 text-gray-500">
<path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
</svg>
<div class="ml-4 text-lg font-semibold leading-7"><a href="https://laravel-news.com/"
class="text-gray-900 underline dark:text-white">Laravel News</a></div>
</div>
<div class="ml-12">
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel
ecosystem, including new package releases and tutorials.
</div>
</div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
<div class="flex items-center">
<svg fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-8 h-8 text-gray-500">
<path
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
<div class="ml-4 text-lg font-semibold leading-7 text-gray-900 dark:text-white">Vibrant Ecosystem</div>
</div>
<div class="ml-12">
<div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com"
class="underline">Forge</a>, <a href="https://vapor.laravel.com"
class="underline">Vapor</a>, <a href="https://nova.laravel.com"
class="underline">Nova</a>, and <a href="https://envoyer.io"
class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries
like <a href="https://laravel.com/docs/billing"
class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk"
class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting"
class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon"
class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum"
class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope"
class="underline">Telescope</a>, and more.
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
<div class="text-sm text-center text-gray-500 sm:text-left">
<div class="flex items-center">
<svg fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
class="w-5 h-5 -mt-px text-gray-400">
<path
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
</path>
</svg>
<a href="https://laravel.bigcartel.com"
class="ml-1 underline">
Shop
</a>
<svg fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="w-5 h-5 ml-4 -mt-px text-gray-400">
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
</path>
</svg>
<a href="https://github.com/sponsors/taylorotwell"
class="ml-1 underline">
Sponsor
</a>
</div>
</div>
<div class="ml-4 text-sm text-center text-gray-500 sm:text-right sm:ml-0">
Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment