UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

Requires JavaScript

Chart Line

Component from Soft UI Dashboard Tailwind Builder

PRO Component

Form Contact

Component from Riva Dashboard Tailwind Builder

<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-xl border border-dashed border-stone-200 bg-white mb-5 draggable">
  <!-- card body  -->
  <div class="flex-auto block py-8 px-9">
    <form action="#" method="post" class="group/form">
      <div class="flex flex-col mb-9">
        <h1 class="font-semibold text-3xl text-dark mb-2 font-display">Contact Us</h1>
        <span class="text-lg font-medium text-muted block"> Feel free to reach out to us with any questions or inquiries. We'll be happy to assist you! </span>
      </div>
      <div class="flex flex-wrap mb-5 -mx-3">
        <div class="w-1/2 px-3">
          <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Name"> Full Name </label>
          <input type="text" name="Name" id="Name" value="" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your full name" required="">
        </div>
        <div class="w-1/2 px-3">
          <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Email"> Email Address </label>
          <input type="email" name="Email" id="Email" class="peer w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your email address" required="">
        </div>
      </div>
      <div class="w-full mb-5">
        <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Subject"> Subject </label>
        <input type="text" name="Subject" id="Subject" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter the subject">
      </div>
      <div class="w-full mb-10">
        <label class="inline-block mb-2 text-[1.15rem] font-medium text-dark" for="Message"> Message </label>
        <textarea rows="6" type="text" name="Message" id="Message" class="w-full px-4 py-3 text-base/normal rounded-xl font-medium block transition-colors duration-200 ease-in-out bg-secondary-light focus:bg-secondary/40 text-stone-500 border focus:outline-none" placeholder="Enter your message"></textarea>
      </div>
      <div class="text-end">
        <button class="inline-block text-base font-medium leading-normal text-center align-middle cursor-pointer rounded-xl transition-colors duration-150 ease-in-out text-white bg-dark shadow-none border-0 px-5 py-4 hover:bg-dark-dark active:bg-dark-dark focus:bg-dark-dark ms-auto" type="submit">Send Message</button>
      </div>
    </form>
  </div>
</div>

Requires JavaScript

Chart Line

Component from Soft UI Dashboard Builder

<div class="card draggable">
    <div class="card-header pb-0">
        <h6>Sales overview</h6>
        <p class="text-sm">
        <i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
        <span class="font-weight-bold">4% more</span> in 2021
        </p>
    </div>
    <div class="card-body p-3">
        <div class="chart"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
        <canvas id="chart-line" class="chart-canvas chartjs-render-monitor chart-line" height="600" width="1088" style="display: block; height: 300px; width: 544px;"></canvas>
        </div>
    </div>
</div>

<script>
if (document.querySelector(".chart-line")) {
	var chartsLine = document.querySelectorAll(".chart-line");

	chartsLine.forEach(function(chart) {
		var ctx = chart.getContext("2d");

		var gradientStroke1 = ctx.createLinearGradient(0, 230, 0, 50);

		gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
		gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
		gradientStroke1.addColorStop(0, "rgba(203,12,159,0)"); //purple colors

		var gradientStroke2 = ctx.createLinearGradient(0, 230, 0, 50);

		gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
		gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
		gradientStroke2.addColorStop(0, "rgba(20,23,39,0)"); //purple colors

		if (!chart.getAttribute('data-chart-initialized')) {
			new Chart(ctx, {
				type: "line",
				data: {
					labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
					datasets: [{
							label: "Mobile apps",
							tension: 0.4,
							borderWidth: 0,
							pointRadius: 0,
							borderColor: "#cb0c9f",
							borderWidth: 3,
							backgroundColor: gradientStroke1,
							fill: true,
							data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
							maxBarThickness: 6,
						},
						{
							label: "Websites",
							tension: 0.4,
							borderWidth: 0,
							pointRadius: 0,
							borderColor: "#3A416F",
							borderWidth: 3,
							backgroundColor: gradientStroke2,
							fill: true,
							data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
							maxBarThickness: 6,
						},
					],
				},
				options: {
					responsive: true,
					maintainAspectRatio: false,
					plugins: {
						legend: {
							display: false,
						},
					},
					interaction: {
						intersect: false,
						mode: "index",
					},
					scales: {
						y: {
							grid: {
								drawBorder: false,
								display: true,
								drawOnChartArea: true,
								drawTicks: false,
								borderDash: [5, 5],
							},
							ticks: {
								display: true,
								padding: 10,
								color: "#b2b9bf",
								font: {
									size: 11,
									family: "Open Sans",
									style: "normal",
									lineHeight: 2,
								},
							},
						},
						x: {
							grid: {
								drawBorder: false,
								display: false,
								drawOnChartArea: false,
								drawTicks: false,
								borderDash: [5, 5],
							},
							ticks: {
								display: true,
								color: "#b2b9bf",
								padding: 20,
								font: {
									size: 11,
									family: "Open Sans",
									style: "normal",
									lineHeight: 2,
								},
							},
						},
					},
				},
			});
			chart.setAttribute("data-chart-initialized", "true");
		}
	});
};
</script>

Http Code With Title Description And Button

Component from Motion Landing Library Builder

<div class="w-full draggable">
    <div class="container flex flex-col items-center gap-16 mx-auto my-32">
      <div class="flex flex-col gap-7">
        <div class="flex flex-col gap-2 px-6 text-center w-10/12 mx-auto">
          <h2 class="text-3xl font-extrabold leading-tight lg:text-4xl text-dark-grey-900 font-display">Well, shoot! The page you're looking for couldn't be found.</h2>
          <p class="text-base font-medium leading-7 text-dark-grey-600">We hit a snag... maybe it's time to head back to our main page.</p>
        </div>
        <div class="flex items-center justify-center">
          <button class="flex items-center justify-center py-4 text-white px-7 rounded-2xl bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Go back to Homepage</button>
        </div>
      </div>
    </div>
  </div>