The visual force page: `<apex:page showHeader="false" title="Request Quote"> <apex:includeLightning />

<div id="lightning" />

<script>
    $Lightning.use("c:RequestQuoteApp", function() {
      $Lightning.createComponent("c:RequestQuoteWebComponent",
        {},
        "lightning",
        cmp => {}
      );
    });
</script>

</apex:page>`

The start html component:`

<div style="padding: 50px">
    <lightning-card title="Quote Request" icon-name="standard:quotes">
        <div class="slds-m-around_medium slds-form">
            <lightning-input label="First Name" placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required></lightning-input>
            <div class="slds-form-element slds-form-element_horizontal">
                <label class="slds-form-element__label" for="">First Name</label>
                <div class="slds-form-elemet__control">
                    <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                </div>
            </div>

            <lightning-layout horizontal-align="spread" class="slds-wrap">
                <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_4-of-12 slds-medium-size_12-of-12">
                    <label><abbr title="required" class="slds-required">*</abbr>First Name</label>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_8-of-12 slds-medium-size_12-of-12">
                    <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                </lightning-layout-item>`

The visual force page:

<apex:page showHeader="false" title="Request Quote">
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:RequestQuoteApp", function() {
          $Lightning.createComponent("c:RequestQuoteWebComponent",
            {},
            "lightning",
            cmp => {}
          );
        });
    </script>
</apex:page>

The start html component:

<template>
    <div class="snackbar"></div>

    <div style="padding: 50px">
        <lightning-card title="Quote Request" icon-name="standard:quotes">
            <div class="slds-m-around_medium slds-form">
                <lightning-input label="First Name" placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required></lightning-input>
                <div class="slds-form-element slds-form-element_horizontal">
                    <label class="slds-form-element__label" for="">First Name</label>
                    <div class="slds-form-elemet__control">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </div>
                </div>

                <lightning-layout horizontal-align="spread" class="slds-wrap">
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_4-of-12 slds-medium-size_12-of-12">
                        <label><abbr title="required" class="slds-required">*</abbr>First Name</label>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_8-of-12 slds-medium-size_12-of-12">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </lightning-layout-item>