<div class="flex items-center h-screen bg-gray-100">
	<div class="container mx-auto flex">
		<div class="w-1/3 m-4">
			<p class="ml-4 mb-3 text-gray-600 text-xs font-bold tracking-wide font-sans">LTR declaration</p>
			<p dir="ltr" class="p-8 bg-white shadow-md rounded-lg">
				I watched العاصفة so beautiful yet terrific.
			</p>
			<p class="m-4 text-orange-600 text-xs font-bold tracking-wide font-sans">The Arabic glyphs will fallback to sans-serif</p>
		</div>
		<div class="w-1/3 m-4">
			<p class="ml-4 mb-3 text-gray-600 text-xs font-bold tracking-wide font-sans">Fallback method</p>
			<p class="ideal p-8 bg-white shadow-md rounded-lg text-center">
				I watched العاصفة so beautiful yet terrific.
			</p>
			<p class="m-4 text-green-600 text-xs font-bold tracking-wide font-sans">The Arabic glyphs will fallback to Amiri</p>
		</div>
		<div class="w-1/3 m-4">
			<p class="ml-4 mb-3 text-gray-600 text-xs font-bold tracking-wide font-sans">RTL declaration</p>
			<p dir="rtl" class="p-8 bg-white shadow-md rounded-lg">
				I watched العاصفة so beautiful yet terrific.
			</p>
			<p class="m-4 text-orange-600 text-xs font-bold tracking-wide font-sans">The English glyphs will fallback to sans-serif</p>
		</div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Amiri|Roboto&display=swap');

[dir=ltr] {
  font-family: "Roboto", sans-serif;
}

[dir=rtl] {
  font-family: "Amiri", sans-serif;
}

.ideal {
  font-family: "Roboto", "Amiri", sans-serif;
}