In Kind Direct Examples

by andyjh07

HTML

<script src="https://cdn.tailwindcss.com"></script>
<script>
	tailwind.config = {
		theme: {
			extend: {
				colors: {
					'orange': '#EC6D23',
					'teal': '#00A1B5',
					'green': '#00B299',
					'yellow': '#F0AB00',
					'pink': '#CF0072',
					'dark_pink': '#9F025C',
					'light_grey': '#FAFAFB',
				},
				padding: theme => ({
					...theme('width'),
				}),
				margin: theme => ({
					...theme('width'),
				}),
			}
		}
	}
</script>

<style type="text/tailwindcss">
    @layer utilities {
      .content-block {
	  	@apply py-20
      }
    }
  </style>
  
<section class="content-block">
	<div class="container mx-auto flex flex-col lg:flex-row lg:items-center">
		<div class="w-full lg:w-7/12 relative z-10">
			<img class="w-full max-h-[34rem] object-cover" src="https://images.unsplash.com/photo-1532635241-17e820acc59f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1630&q=80" alt="">
		</div>
		<div class="w-full lg:w-1/2 space-y-8 bg-teal text-white p-12 lg:pl-28 lg:-ml-1/12 xl:-ml-16">
			<h2 class="text-white text-4xl font-bold">Transforming lives at home and internationally</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos assumenda quasi, recusandae debitis molestiae repellat sint provident distinctio sed amet odio, consequatur deleniti! Dignissimos nihil est, voluptatibus esse mollitia.
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aliquam repellendus doloremque porro. Neque soluta, eligendi obcaecati in quos deleniti unde a ea doloribus? Cupiditate labore, recusandae assumenda quidem natus!</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque assumenda beatae similique, delectus animi impedit voluptate labore fugit nam officia laboriosam omnis dolorem nisi quibusdam, odio, perspiciatis amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nulla quasi aliquam! Laudantium quis quibusdam reiciendis quae,...