https://laravelnews.imgix.net/images/In0PKsp—Imgur.png?ixlib=php-3.3.1
1<section class="py-24">
2 <div class="grid md:grid-cols-[2fr,3fr] gap-6 md:gap-12 mt-6">
3 <aside>
4 <h2 class="text-xl font-semibold tracking-tight">Personal</h2>
5
6 <p class="mt-1 text-gray-500">
7 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam ducimus enim.
8 </p>
9 </aside>
10
11 <form
12 class="block p-2 space-y-2 bg-white shadow rounded-xl"
13 action=""
14 >
15 <div class="grid grid-cols-2 gap-6 px-4 py-4">
16 <div class="col-span-2 space-y-2 md:col-span-1">
17 <label
18 class="inline-block text-sm font-medium text-gray-700"
19 for="first_name"
20 >First name</label>
21
22 <input
23 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
24 id="first_name"
25 type="text"
26 >
27 </div>
28
29 <div class="col-span-2 space-y-2 md:col-span-1">
30 <label
31 class="inline-block text-sm font-medium text-gray-700"
32 for="last_name"
33 >Last name</label>
34
35 <input
36 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
37 id="last_name"
38 type="text"
39 >
40 </div>
41
42 <div class="col-span-2 space-y-2">
43 <label
44 class="inline-block text-sm font-medium text-gray-700"
45 for="email"
46 >Email address</label>
47
48 <input
49 class="block w-full h-10 transition duration-75 border-gray-300 rounded-lg shadow-sm focus:ring-1 focus:ring-inset focus:ring-blue-600 focus:border-blue-600"
50 id="email"
51 type="email"
52 >
53 </div>
54
55 <div class="col-span-2 space-y-2">
56 <label
57 class="inline-block text-sm font-medium text-gray-700"
58 for="about_me"
59 >About me</label>
60
61 <textarea
62 class="block w-full transition duration-75 border-gray-300 rounded-lg shadow-sm focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600"
63 id="about_me"
64 ></textarea>
65 </div>
66 </div>
67
68 <div class="border-t"></div>
69
70 <footer class="flex items-center justify-end px-4 py-2 space-x-4">
71 <button
72 class="inline-flex items-center justify-center h-8 px-3 text-sm font-semibold tracking-tight text-white transition bg-blue-600 rounded-lg shadow hover:bg-blue-500 focus:bg-blue-700 focus:outline-none focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-2 focus:ring-white focus:ring-inset"
73 type="submit"
74 >Save details</button>
75 </footer>
76 </form>
77 </div>
78</section>
Laravel News