JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

{
"query": "query($slug:String!,$isPreview:Boolean=false,$locale:String!){templateGeneralLandingPageCollection(where:{slug:$slug},locale:$locale,preview:$isPreview,limit:1){items{title slug metadata{...metadataFields}components:componentsCollection(limit:11){items{__typename...on TextCardsComponent{...textCardsFields}...on TwoColumnImageTextComponent{...twoColumnImageTextFields}...on AccordionComponent{...accordionFields}...on ContactUsFormComponent{...contactUsFormFields}...on CardsDescriptorComponent{...cardsDescriptorFields}...on DetailsSelectorComponent{...detailsSelectorFields}...on FreestandingStatementComponent{...freestandingStatementFields}...on HeroBreadcrumbsComponent{...heroBreadcrumbsFields}...on HeroCarouselComponent{...heroCarouselFields}...on ImageBlurbsExpandableComponent{...imageBlurbsExpandableFields}...on LeadGenerationComponent{...leadGenerationFields}...on MultiColumnTextComponent{...multiColumnTextFields}...on TabbedToggleComponent{...tabbedToggleFields}...on TwoColumnLargeExpandableCardsComponent{...twoColumnExpandableCardsFields}...on VisualTileRowsComponent{...visualTileRowsFields}...on FullWidthCtaComponent{...fullWidthCtaFields}...on IFrameComponent{...iframeFields}...on WysiwygComponent{...wysiwygFields}...on PullQuoteComponent{...pullQuoteFields}...on LargeStatementComponent{...largeStatementFields}...on SmallTwoColumnImageTextComponent{...smallTwoColumnImageTextFields}...on StatsCalloutComponent{...statsCalloutFields}...on AdditionalResourcesComponent{...additionalResourcesFields}...on InsightsCardsComponent{...insightsCardsFields}...on VerticalListDetailComponent{...verticalListDetailFields}}}}}}fragment metadataFields on Metadata{title metaTitle keyword description facebookType image{...assetFields}canonical noIndex}fragment twoColumnImageTextFields on TwoColumnImageTextComponent{rtTitle:title{json}variant backgroundColor rtHeading:heading{json}rtBlurb:blurb{json}cta{title url openInNewTab}eyebrow cardTitle cardDescription...

JavaScript

{
  "query": "query($slug:String!,$isPreview:Boolean=false,$locale:String!){templateGeneralLandingPageCollection(where:{slug:$slug},locale:$locale,preview:$isPreview,limit:1){items{title slug metadata{...metadataFields}components:componentsCollection(limit:11){items{__typename...on TextCardsComponent{...textCardsFields}...on TwoColumnImageTextComponent{...twoColumnImageTextFields}...on AccordionComponent{...accordionFields}...on ContactUsFormComponent{...contactUsFormFields}...on CardsDescriptorComponent{...cardsDescriptorFields}...on DetailsSelectorComponent{...detailsSelectorFields}...on FreestandingStatementComponent{...freestandingStatementFields}...on HeroBreadcrumbsComponent{...heroBreadcrumbsFields}...on HeroCarouselComponent{...heroCarouselFields}...on ImageBlurbsExpandableComponent{...imageBlurbsExpandableFields}...on LeadGenerationComponent{...leadGenerationFields}...on MultiColumnTextComponent{...multiColumnTextFields}...on TabbedToggleComponent{...tabbedToggleFields}...on TwoColumnLargeExpandableCardsComponent{...twoColumnExpandableCardsFields}...on VisualTileRowsComponent{...visualTileRowsFields}...on FullWidthCtaComponent{...fullWidthCtaFields}...on IFrameComponent{...iframeFields}...on WysiwygComponent{...wysiwygFields}...on PullQuoteComponent{...pullQuoteFields}...on LargeStatementComponent{...largeStatementFields}...on SmallTwoColumnImageTextComponent{...smallTwoColumnImageTextFields}...on StatsCalloutComponent{...statsCalloutFields}...on AdditionalResourcesComponent{...additionalResourcesFields}...on InsightsCardsComponent{...insightsCardsFields}...on VerticalListDetailComponent{...verticalListDetailFields}}}}}}fragment metadataFields on Metadata{title metaTitle keyword description facebookType image{...assetFields}canonical noIndex}fragment twoColumnImageTextFields on TwoColumnImageTextComponent{rtTitle:title{json}variant backgroundColor rtHeading:heading{json}rtBlurb:blurb{json}cta{title url openInNewTab}eyebrow cardTitle cardDescription...