<template>
    <div>
        <div class="container-fluid z-0" style="background: linear-gradient(360deg, rgba(18, 75, 189, 0.08) 0%, rgba(18, 75, 189, 0) 100%);">
          <div class="flex justify-center">
              <div class="mt-9 inline-flex p-2">
                  
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mt-9 inline-flex p-2 font-serif text-2xl italic text-red-800 font-semibold">
                <span class="text-blue-600" >Teeny Beans Curriculum </span> &nbsp; <span class=" text-yellow-900" > Blog </span>
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mb-9 inline-flex p-1">
                  <form>   
                      <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only ">Search</label>
                      <div class="relative w-96">
                          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                              <svg aria-hidden="true" class="w-5 h-5 text-gray-500 " 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                          </div>
                          <input type="search" id="default-search" class="block p-4  pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 " placeholder="Search our articles" required>
                          <button type="submit" class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 ">Search</button>
                      </div>
                  </form>
              </div>
          </div>
          <div class="flex justify-center">
              <div class="mt-9 inline-flex p-2">
                  
              </div>
          </div>
      </div>
    </div>
</template>
<style>
    .text-color-1 {
          color: #7C4C23;
      }
</style>