Tutorial CRUD Laravel 8 dengan TailwindCSS

create.blade.php

<x-app-layout>
  <x-slot name="title">{{ $title }}</x-slot>

  {{-- header content --}}
  <div class="px-6 py-4 mb-4 overflow-hidden border rounded-lg shadow-sm border-secondary-300 bg-secondary-200">
    <div class="flex flex-col justify-between sm:flex-row">
      <div class="text-center sm:text-left flex-start">
        <h3 class="text-lg font-semibold leading-6 text-gray-800">{{ $title }}</h3>
        <p class="mt-px text-sm leading-5 text-gray-600 sm:mt-1">Fill in the following information.</p>
      </div>
      <div class="flex items-end justify-center">
        <div
          class="flex items-center px-3 py-1 mt-1 text-xs text-gray-600 border rounded-full border-secondary-300 bg-secondary-300 sm:py-0 sm:mt-0 sm:border-none sm:bg-transparent sm:px-0">
          <span>Home</span>
          <svg class="w-3 h-3"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd" />
          </svg>
          <a href="{{ route('articles.index') }}"
            class="hover:text-gray-700">Articles</a>
          <svg class="w-3 h-3"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd" />
          </svg>
          <a href="{{ route('articles.create') }}"
            class="text-primary-500 hover:text-primary-600">Create</a>
        </div>
      </div>
    </div>
  </div>

  {{-- alert --}}
  @if (session('success'))
  <div class="px-4 py-2 mb-4 text-sm text-center text-green-800 bg-green-300 rounded-full shadow-sm">
    {!! session('success') !!}
  </div>
  @endif

  {{-- form create --}}
  <form action="{{ route('articles.store') }}"
    method="post">
    @csrf
    @include('articles.form')
  </form>
</x-app-layout>

form.blade.php

<div class="p-4 overflow-hidden border rounded-lg shadow-md sm:p-6 border-secondary-300 bg-secondary-200">
  <div class="grid grid-cols-6 gap-4">

    {{-- title --}}
    <div class="col-span-6">
      <label for="title"
        class="block text-sm font-bold tracking-wide text-gray-700 uppercase">Title</label>
      <input type="text"
        class="block w-full mt-1 text-sm transition rounded-lg shadow-sm border-secondary-300 bg-secondary-50 focus:bg-white focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        name="title"
        id="title"
        autofocus
        value="{{ old('title') ?? $article->title }}">
      @error('title')
      <p class="mt-1 text-xs font-medium text-red-500 dark:text-red-400">{{ $message }}</p>
      @enderror
    </div>

    {{-- content --}}
    <div class="col-span-6">
      <label for="content"
        class="block text-sm font-bold tracking-wide text-gray-700 uppercase">Content</label>
      <textarea
        class="block w-full mt-1 text-sm transition rounded-lg shadow-sm border-secondary-300 bg-secondary-50 focus:bg-white focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        name="content"
        id="content"
        rows="10">{{ old('content') ?? $article->body }}</textarea>
      @error('content')
      <p class="mt-1 text-xs font-medium text-red-500 dark:text-red-400">{{ $message }}</p>
      @enderror
    </div>

  </div>

  {{-- action --}}
  <div class="mt-4 -mx-6 -mb-6 bg-secondary-300">
    <div class="px-6 py-4 space-x-1 text-right">
      <a href="{{ route('articles.index') }}"
        class="inline-flex items-center justify-center px-4 py-2 text-sm font-bold tracking-wider text-gray-600 uppercase transition bg-white border border-transparent rounded shadow select-none focus:border-gray-400 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-400 focus:ring-opacity-30 disabled:opacity-50">
        Cancel
      </a>
      <button
        class="inline-flex items-center justify-center px-4 py-2 text-sm font-bold tracking-wider text-white uppercase transition bg-blue-500 border border-transparent rounded shadow select-none focus:border-blue-600 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-30 disabled:opacity-50">
        {{ $submit }}
      </button>
    </div>
  </div>

</div>